list item on click get innerhtml to js function

Question

Hello I have written a simple html/javascript calculator.

Whenever I make a calculation, it is added to the list displayed on the html.

What I need: When a list item is clicked I need the string of that calculation, so I can reload the values back into operand 1 and operand 2

<html>
<head>
</head>
<body>
    <h1>Calculator With Buttons And History</h1>
    <table>
    <tbody>
    <tr>
    <td><label>Operand 1:</label></td>
    <td><input id="o1" type="text" /></td>
    </tr>
    <tr>
    <td><label>Operand 2:</label></td>
    <td><input id="o2" type="text" /></td>
    </tr>
    </tbody>
    </table>
    <p><button onclick="add()"> + </button> <button onclick="sub()"> - </button> <button onclick="mul()"> x </button> <button onclick="div()"> / </button></p>
    <p>Result:<input id="result" name="result" readonly="readonly" type="text" value="" /></p>
    <ul id="result_list" class="list-group" onclick="getCalc(this)">
        <li class="list-group-item">1+1=2</li>
        <li class="list-group-item">1-1=0</li>
        <li class="list-group-item">2*2=4</li>
        <li class="list-group-item">3/3=1</li>
      </ul>
    <script src="filter.js"> </script>
    <script src="calc.js"> </script>
</body>
</html>

Can you prepare minimal reproducible example for your issue? https://stackoverflow.com/help/minimal-reproducible-example — mybrave, Mar 24 '20 at 16:12

ErikM · Accepted Answer · 2020-03-24T15:47:43.133

Without seeing the code or what you wish to do more than fetch the innerHTML, here are a few options:

One way of doing it is removing the onClick event from the <ul> tag and moving it to each <li> item

<ul id="result_list" class="list-group">
   <li class="list-group-item" onclick="getCalc(this)">1+1=2</li>
   <li class="list-group-item" onclick="getCalc(this)">1-1=0</li>
   <li class="list-group-item" onclick="getCalc(this)">2*2=4</li>
   <li class="list-group-item" onclick="getCalc(this)">3/3=1</li>
</ul>

And then in your javascript

 function getCalc(item) {
    console.log(item.innerHTML)
 }

Another way is to add a eventListener for <ul id="result_list" class="list-group">

<ul id="result_list" class="list-group">
   <li class="list-group-item">1+1=2</li>
   <li class="list-group-item">1-1=0</li>
   <li class="list-group-item">2*2=4</li>
   <li class="list-group-item">3/3=1</li>
</ul>

And in your Javascript

const resultList = document.getElementById('result_list');
 resultList.addEventListener('click', item => {
    console.log(item.target.innerHTML);
 });

Thank you I went with the eventListener for the list. Since everytime a button is pressed another listitem is created and inserted to the list. Thank you very much — DeleteSystem69, Mar 24 '20 at 16:49

score 0 · Answer 2 · answered Mar 24 '20 at 15:48

To achieve this in pure old JS, you will need to edit your add and sub functions so that they attach event listeners to the li they create:

<html>
<head>
</head>
<body>
    <h1>Calculator With Buttons And History</h1>
    <table>
    <tbody>
    <tr>
    <td><label>Operand 1:</label></td>
    <td><input id="o1" type="text" /></td>
    </tr>
    <tr>
    <td><label>Operand 2:</label></td>
    <td><input id="o2" type="text" /></td>
    </tr>
    </tbody>
    </table>
    <p><button onclick="add()"> + </button> <button onclick="sub()"> - </button> <button onclick="mul()"> x </button> <button onclick="div()"> / </button></p>
    <p>Result:<input id="result" name="result" readonly="readonly" type="text" value="" /></p>
    <ul id="result_list" class="list-group">
      </ul>
</body>
<script>
  const o1 = document.querySelector("#o1");
  const o2 = document.querySelector("#o2");
    
  const resetOperators = (e) => {
    const re = /\+|\-/;
    const [v1, v2] = e.target.innerText.split(re);
    o1.value = v1;
    o2.value = v2
  }

  const add = () => {
    const val = parseFloat(o1.value, 10) + parseFloat(o2.value, 10);
    const li = document.createElement("li");
    li.innerHTML=`${o1.value}+${o2.value}`;
    li.addEventListener("click", resetOperators);
    document.querySelector("#result_list").appendChild(li);
    document.querySelector("#result").value = val;
  }
</script>
</html>

list item on click get innerhtml to js function

2 Answers2