document.getElementById（）.innerHTML 不起作用，但我可以将该元素的值记录到控制台。这是怎么回事？-解网

问：

我目前正在重写一个小项目，在这个项目中，一个位于澳大利亚的慈善组织根据一系列问题进行评分。以前，HTML 的格式很差，没有表单标签、缩进等，所以我决定根据我在大学学到的 HTML 表单重新编写它。但是，我以前用来将空白 HTML 占位符 paragaraphs 更改为文本（解释每个问题的分数和总分）的方法不再适用于新的 HTML 和 JS。name 和 state 的值都记录到控制台，但 HTML 不会按预期更改。代码如下：

function getNameOfOrganisation () {
    let organisation = document.getElementById("nameOfOrganisation").value;
    return organisation;
}

function getStateOfOrganisation () {
    let state = document.getElementById("state").value;
    if (state === "VIC") {
        let points = 1;
        return points;
    } else if (state === "NSW") {
        let points = 0.5;
        return points;
    } else {
        let points = 0;
        return points;
    }
}

function main () {
    let name = getNameOfOrganisation();
    document.getElementById("namePlaceholder").innerHTML = "Name of organisation: " + name;
    console.log(name);
    let state = getStateOfOrganisation();
    document.getElementById("statePlaceholder").innerHTML = "Points scored for state/territory: " + state;
    console.log(state);
}

<h1>Organisation Score Calculator</h1>
<form action="">
    <h4>Input the name of the charity.</h4>
    <input type="text" id="nameOfOrganisation">
    <h4>Which state/territory does this organisation service?</h4>
    <select name="state" id="state">
        <option value="VIC">VIC</option>
        <option value="NSW">NSW</option>
        <option value="ACT">ACT</option>
        <option value="QLD">QLD</option>
        <option value="NT">NT</option>
        <option value="TAS">TAS</option>
        <option value="WA">WA</option>
    </select>
    <br>
    <br>
    <button onclick="main()">Get score!</button>
    <p id="namePlaceholder"></p>
    <p id="statePlaceholder"></p>
</form>

我认为这是在 HTML 之前加载 Javascript 的问题，或者类似的东西（请原谅我的任何语言错误），因为我在这个网站上看到其他人几乎我的问题通过更改脚本标签在 HTML 中的位置来完全解决他们的问题。这无济于事。

JavaScript HTML 表单 dom

当您添加的内部时，单击它将自动提交您的表单，从而刷新您的页面。要阻止表单提交，请添加到您的，这将保留 JS 所做的更改（当然，如果您这样做，那么您需要以另一种方式处理将数据提交到服务器，如果这是您需要做的事情）。<button><form>type="button"<button>

0赞 cantdocpp 8/20/2023

更改函数和函数内部，在第一行添加mainmain(e)e.preventDefault()

1赞 user3840170 8/20/2023

当您不打算将表单作为 HTTP 请求提交时，使用元素是没有意义的。放下。<form>

0赞 traktor 8/20/2023

为了向@user3840170的评论添加更多内容，您通过添加标签来破坏代码。自 HTML3 以来，按钮和其他“表单”内容元素就不需要表单容器了。form

答：

-1赞 anmatika 8/20/2023 #1

考虑一下

function getNameOfOrganisation() {
  return document.getElementById("nameOfOrganisation").value;
}

function getStateOfOrganisation() {
  const state = document.getElementById("state").value;

  if (state === "VIC") {
    return 1;
  } else if (state === "NSW") {
    return 0.5;
  } else {
    return 0;
  }
}

function log(e) {
  document.getElementById("statePlaceholder").innerHTML = "Points scored for state/territory:" + getStateOfOrganisation();
  document.getElementById("namePlaceholder").innerHTML = "Name of organisation: " + getNameOfOrganisation();
}

log();

const form = document.getElementById("form");

form.addEventListener("submit", (e) => {
  e.preventDefault(); // prevent the actual submit for demonstration purposes, in real world app you'd want to remove this
  
  const data = new FormData(e.target);
  console.log('submitting:', [...data.entries()]);
    
  log();
});

<h1>Organisation Score Calculator</h1>
<form id="form" action="">
  <h4>Input the name of the charity.</h4>
  <input type="text" id="nameOfOrganisation" name="nameOfOrganisation">
  <h4>Which state/territory does this organisation service?</h4>
  <select name="state" id="state">
    <option value="VIC">VIC</option>
    <option value="NSW">NSW</option>
    <option value="ACT">ACT</option>
    <option value="QLD">QLD</option>
    <option value="NT">NT</option>
    <option value="TAS">TAS</option>
    <option value="WA">WA</option>
  </select>
  <br>
  <br>
  <button type="submit">Get score!</button>
  <p id="namePlaceholder"></p>
  <p id="statePlaceholder"></p>
</form>

0赞 Salwa A. Soliman 8/20/2023 #2

1-考虑在单击按钮时发送事件，以防止页面重新加载并丢失数据<button onclick="main(event)">Get score!</button>

2-添加到main功能以告诉页面不要重新加载e.preventDefault();

function getNameOfOrganisation() {
  let organisation = document.getElementById("nameOfOrganisation").value;
  return organisation;
}

function getStateOfOrganisation() {
  let state = document.getElementById("state").value;
  if (state === "VIC") {
    let points = 1;
    return points;
  } else if (state === "NSW") {
    let points = 0.5;
    return points;
  } else {
    let points = 0;
    return points;
  }
}

function main(e) {
  e.preventDefault();
  let name = getNameOfOrganisation();
  document.getElementById("namePlaceholder").innerHTML = "Name of organisation: " + name;
  let state = getStateOfOrganisation();
  document.getElementById("statePlaceholder").innerHTML = "Points scored for state/territory: " + state;
}

<h1>Organisation Score Calculator</h1>
<form action="">
  <h4>Input the name of the charity.</h4>
  <input type="text" id="nameOfOrganisation">
  <h4>Which state/territory does this organisation service?</h4>
  <select name="state" id="state">
    <option value="VIC">VIC</option>
    <option value="NSW">NSW</option>
    <option value="ACT">ACT</option>
    <option value="QLD">QLD</option>
    <option value="NT">NT</option>
    <option value="TAS">TAS</option>
    <option value="WA">WA</option>
  </select>
  <br>
  <br>
  <button onclick="main(event)">Get score!</button>
  <p id="namePlaceholder"></p>
  <p id="statePlaceholder"></p>
</form>

上一个：在 Form 组件的 onchange 事件中出现输入延迟。向 API 发送数据是可以的。datasByParameter 数组的对象长度可能是问题所在

下一个：如何使用 JavaScript 重置文本框，但 HTML 中的特定文本框除外

document.getElementById（）.innerHTML 不起作用，但我可以将该元素的值记录到控制台。这是怎么回事？

document.getElementById().innerHTML isn't working, but I can log the value of that element to the console. What's going on?

评论