How to put an id inside of an alert in javascript

Question

I made a code to get user input and add items to a list. Im now trying to add a button that racks the sum of all the numbers in a list and displays it when a button is clicked. Right now the code displays an alert when the button is clicked, but does not display the sum.

<!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">0 </button> --->
    
   <button onclick="reply_click(this.id)">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 ");
  }
  </script>
  
  
</html>

You know your code will always generate errors since you never created the HTML element with id="sum"... — H. Figueiredo, Mar 18 '19 at 14:02
Between both answers bellow, you should have your answer, one tells you about a missing HTML element, the other about why your alert was empty. — H. Figueiredo, Mar 18 '19 at 14:05
You've got a lot of issues with your code in general. It looks like you are learning from a resource that still shows how we did things 25 years ago (seriously). See my answer below for a comprehensive explanation of the changes you should make. — Scott Marcus, Mar 18 '19 at 14:22

scaff · Answer 1 · 2019-03-18T14:10:09.453

you havent an element whit id sum try to anable it

<!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>

Scott Marcus · Answer 2 · 2019-03-18T15:56:07.490

Your question asks how to get the id of the clicked element, but your explanation asks how to get the sum of the items added to the list. I'll answer the how to get the id question below, but the final answer shows how to get the sum.

First, don't use inline HTML event attributes (i.e. onclick). Here's why.
Next, if the element doesn't have an id, then there's nothing to get.
Just use this to refer to the element that caught the event.

Now, you've got some other issues to correct as well...

"Topics" shouldn't be in the list, it should be a title above it.
Don't use an HTML tag because of the way it formats its content (i.e. <h3>). Use CSS for all formatting. HTML is for describing what the content is.
Nothing is allowed after </body> except </html> so move that <script> you have there to just prior to the </body>, which will then place it just after the </script> you have for the button click code. Given that the two <script> elements will then be right next to each other, just combine them into a single <script>.
type="text/javascript" hasn't been necessary for years on <script> elements.
.innerHTML has performance and security implications, so don't use it when the string you are working with doesn't contain any HTML, use .textContent instead and also use .textContent instead of .innerText, which is non-standard.
Your code refers to an element with an id of sum, but you don't have that in your code.
Don't use self-terminating tags. It buys you nothing and adds confusion.

.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>

score 0 · Answer 3 · answered Mar 18 '19 at 14:06

You don't use the correct id.

You can set the sum into a data attribut on your button. And show the value on the click.

<!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>

Note: when you addition to make your sum, don't forget to check if you have an number in input.

How to put an id inside of an alert in javascript

3 Answers3