时间戳

首页 > 解决方案 > 当我尝试设置一个 HTML 和 JS

javascript - 当我尝试设置一个 HTML 和 JS

问题描述

我每 10 秒调用一次这个 JS 函数，但没有任何反应。当在 Chrome 的 JS 控制台中输入完全相同的代码时，我得到了想要的结果。到底是怎么回事？

document.getElementById("mesText").innerHTML = ("Message (" + "Estimated cost: " + ((375 + document.getElementById("MessageBox").value.length * 8 + document.getElementById("name").value.length * 8)) + " Gas)");
 <label for="mes" class="col-lg-2 control-label" id="mesText">
Message
</label>

标签： javascripthtml

解决方案

我怀疑您不想在消息后更新该部分，因为您发布的代码中span没有h1这样的元素。我已经尝试过你的代码并且它有效。检查您的 html 文件中是否有带有 ids: 的元素，MessageBox 因为name该代码正在获取它们的值。

另请注意，具有提及 id 的元素不能只是任意的 html 元素，而是那些实际上具有value与之关联的属性的元素。否则你会得到一个错误，因为你正在使用value.lengthwhich 在这种情况下不能使用（value会是undefined，并且undefined没有length属性）。

document.querySelector('button').addEventListener('click', event => {
  document.getElementById("mesText").innerHTML = ("Message (" + "Estimated cost: " + ((375 + document.getElementById("MessageBox").value.length * 8 + document.getElementById("name").value.length * 8)) + " Gas)");
});
<input type="text" id="name" />
<input id='MessageBox' />
<button>submit</button>

<label for="mes" class="col-lg-2 control-label" id="mesText">
  Message: 
</label>

而且我建议对您的代码进行一些重构，因为它确实不那么可读，这也使得测试变得更加困难。您可以进行一些修改并检查输出console.log以查看您是否获得了正确的元素。

const btn = document.querySelector('button');
const output = document.getElementById("mesText");
const messageBox = document.getElementById("MessageBox");
const name = document.getElementById("name");

console.log(messageBox);
console.log(name);

btn.addEventListener('click', event => {
  output.innerHTML = ("Message (" + "Estimated cost: " + ((375 +
    messageBox.value.length * 8 + name.value.length * 8)) + " Gas)");
});
<input type="text" id="name" />
<input id='MessageBox' />
<button>submit</button>

<label for="mes" class="col-lg-2 control-label" id="mesText">
  Message: 
</label>

推荐阅读