When a list item is clicked, extract its innerHTML and pass it to a JavaScript

Question

When a list item is clicked, extract its innerHTML and pass it to a JavaScript

Hey there, I've created a basic HTML/JavaScript calculator.

Each time I perform a calculation, it gets added to the list shown on the webpage.

Here's what I'm looking for: When a user clicks on an item in the list, I want to retrieve the string of that operation 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>

javascript

Answer 1

Answer №1

If you're looking to fetch innerHTML without viewing the code, there are a couple of ways to approach it:

One option is to remove the onClick event from the <ul> tag and add it to each individual <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>

In your JavaScript, you can then define the getCalc function like this:

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

Another approach is to add an 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 file, you can set up the event listener like this:

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

Answer 2

If you're looking to fetch innerHTML without viewing the code, there are a couple of ways to approach it:

One option is to remove the onClick event from the <ul> tag and add it to each individual <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>

In your JavaScript, you can then define the getCalc function like this:

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

Another approach is to add an 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 file, you can set up the event listener like this:

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

Answer 3

Answer №2

To implement this using pure JavaScript, you must update your add and sub functions to include event listeners for the li elements they generate:

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

Answer 4

To implement this using pure JavaScript, you must update your add and sub functions to include event listeners for the li elements they generate:

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

When a list item is clicked, extract its innerHTML and pass it to a JavaScript

Answer №1

Answer №2

Similar questions

I'm having trouble with certain JavaScript functions on my website - some are working fine, but others aren't. Any suggestions on what I should do

Multiple file formats supported by Uploadify

I encounter an error message stating "The requested resource has been deleted" whenever another website links to my site

Issue with improper lighting on Three.Geometry objects when using LambertMaterial in Three.js

Ways to transform the DropBox chooser button into an image

Issue encountered when trying to add data into MySQL database

Invoke a JavaScript function once the div has finished loading

utilizing a modal to trigger a function within the parent scope of an Angular application

Adhesive Navigation Bar

jQuery Update for Header/Footer Navigation

Encountered a TypeError in React 16.7: The function (0, _react.useState) is not recognized

Utilizing Vue.js to create a secondary navigation by transforming a select dropdown and integrating tabs simultaneously

Why is Vue JS throwing an error stating "undefined is not an object"?

Remove properties that are not part of a specific Class

Jquery form calculation not matching up

Attempting to implement Vue js extensions without relying on NPM or webpack

React: The issue with async and await not functioning as expected when using fetch

Efficiently Displaying Multiple HTML Elements in React Native WebView

Show the text from the chosen option using jQuery with a button

JavaScript function to toggle visibility and scroll back to top of the page