Question

我编写了代码来获取用户输入并将项目添加到列表中。我现在尝试添加一个按钮，该按钮将列表中所有数字的和存储起来，并在单击按钮时显示出来。现在，当单击按钮时，代码显示警报，但不显示总和。

−1

Answer 1

您的问题询问如何获得被单击元素的id，但您的解释询问如何获得添加到列表中的项目的总和。我将在下面回答如何获得id问题，但最终答案将显示如何获得总和。

首先，不要使用内联HTML事件属性（即onclick）。 Here's why.
接下来，如果元素没有id，则没有任何内容可得到。
只需使用this来引用捕获了事件。

现在，您还有其他一些问题需要纠正...

“主题”不应出现在列表中，它应该是其上方的标题。
不要使用HTML标记，因为它格式化其内容的方式（即 <h3>）。使用CSS进行所有格式设置。 HTML用于描述内容是。
在</body>之后，除了</html>之外，一律不允许 <script>到</body>之前的位置，它将{ 然后将其放在按钮的</script>之后 click代码。假设两个<script>元素将是彼此相邻，只需将它们组合成一个<script>。
type="text/javascript"多年来没有必要 <script>个元素。
.innerHTML具有性能和安全性，因此请不要使用当您使用的字符串不包含任何HTML时，请使用 .textContent代替，也使用.textContent代替 .innerText，这是非标准的。
您的代码引用的元素是id为sum的元素，但您不是在您的代码中输入。
Don't use self-terminating tags.它什么也买不成，并且增加了混乱。

.title { font-weight:bold; margin-top:1em; }

<!DOCTYPE html>
<html>
<head></head>
<body>

  <input type='number' id='input'> <!-- You only want numbers so use a number input -->
  <input type='button' value='add to list' id='add' disabled="disabled">

  <div class="title">Topics</div>
  <ul id='list'></ul> 
  <button id="something">Click Here To See The Sum</button>

  <script>
    // Get references to the elements you'll use repeatedly:
    let list = document.getElementById("list");;
    let btn = document.getElementById("something");
    let input = document.getElementById("input");
    let add = document.getElementById("add");
    
    var sum = 0;
    
    // Set up events in JavaScript, not HTML:
    input.addEventListener("input", enableDisable);
    btn.addEventListener("click", sumvar);

    add.addEventListener("click", function() {
      var li = document.createElement("li");
      li.textContent = input.value;
      sum += +input.value; // The prepended + converts the string to a number
      list.appendChild(li);
      input.value = "";  // Clear out the input
      add.disabled = "disabled";
    });
   
    function enableDisable(){
      // Disable/Enable the Add button depending on if there is input to add
      if(this.value === ""){
        add.disabled = "disabled";
      } else {
        add.removeAttribute("disabled");
      }
    }
    function sumvar() {
      alert("The sum of your numbers is: " + sum);
    }
  </script>   


</body>
  

  
  
</html>

Answer 2

您没有ID和尝试启用的元素

<!DOCTYPE html>
<html>

<head></head>

<body>

  <input type='text' id='input' />
  <input type='button' value='add to list' id='add' />

  <ul id='list'>
    <li> <b>Topics</b></li>
  </ul>
  
  <h3>
    
  <span id="sum">0 </span>
    
   <button onclick="sumvar()">Click Here To See The Sum</button>

<script type="text/javascript">
function reply_click(clicked_id)
{
    alert(clicked_id);
}
</script> 
    
  </h3>

</body>
  
<script>
  var sum = 0;

document.getElementById("add").onclick = function() {
  var text = document.getElementById("input").value;
  var li = document.createElement("li");
  li.innerText = text;
  sum += parseInt(text);
  
  document.getElementById("list").appendChild(li);
  document.getElementById("sum").innerHTML = sum;
}
  
  function sumvar() {
    alert("The sum of your numbers are "+document.getElementById("sum").innerHTML);
  }
  </script>
  
  
</html>

Answer 3

您没有使用正确的ID。

您可以将总和设置为按钮上的数据属性。并显示点击的价值。

<!DOCTYPE html>
<html>

<head></head>

<body>

  <input type='text' id='input' />
  <input type='button' value='add to list' id='add' />

  <ul id='list'>
    <li> <b>Topics</b></li>
  </ul>

  <h3>

    <button id="sum" onclick="reply_click(this.dataset.sum)" data-sum="">Click Here To See The Sum</button>

    <script type="text/javascript">
      function reply_click(sum) {
        alert(sum);
      }
    </script>

  </h3>

</body>

<script>
  var sum = 0;

  document.getElementById("add").onclick = function() {
    var text = document.getElementById("input").value;
    var li = document.createElement("li");
    li.innerText = text;
    if (parseInt(text) == text) {
      sum += parseInt(text);
    }

    document.getElementById("list").appendChild(li);
    document.getElementById("sum").dataset.sum = sum;
  }

  function sumvar() {
    alert("The sum of your numbers are ");
  }
</script>
</html>

注意：当您加法求和时，请不要忘记检查输入的数字。

如何在JavaScript中将ID放入警报中

3 个答案: