JavaScript code not working when displaying value of html element

Question

I want to display details in div element(id="displayStoragevol2"). Why below code is not working

<hr>
<h3>LocalStorage App Vol-2</h3>
<label>First Name: </label><input type="text" id="firstNamevol2">
<label>Last Name: </label><input type="text" id="lastNamevol2">
<button type="submit" id="fetchDetailsvol2">Submit</button>
<div id="displayStoragevol2"></div>
<hr>

    <script>
    /*LocalStorage Vol 2*/
    document.getElementById('fetchDetailsvol2').addEventListener('click', fetchFunction);
    var firstNamevol2 = document.getElementById('firstNamevol2').value;
    var lastNamevol2 = document.getElementById('lastNamevol2').value;
    var displayStoragevol2 = document.getElementById('displayStoragevol2');


    function fetchFunction(){               
        displayStoragevol2.innerHTML = firstNamevol2 + lastNamevol2;
    }
</script>

You should learn how to use the label element properly. Without a for attribute or a form control inside it, a label is useless. — Quentin
– Quentin, Commented May 4, 2017 at 9:05

Quentin · Accepted Answer · 2017-05-04 09:04:46Z

5

You read the values from the inputs when the page loads. At that time they are blank.

If you want to read the values when the element is clicked, you need to do so inside the event handler function.

answered May 4, 2017 at 9:04

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aseem Sharma Over a year ago

I updated like this function fetchFunction(){ displayStoragevol2.innerHTML = firstNamevol2.value; + lastNamevol2.value; } and it is not showing Last Name value

Quentin Over a year ago

@AseemSharma — firstNamevol2 and displayStoragevol2 are copies of the value property when the page loads. They are empty strings, not input element objects.

Jayampathy Wijesena · Accepted Answer · 2017-05-04 09:13:35Z

0

Your script section should be updated as follows,

<script>
document.getElementById('fetchDetailsvol2').addEventListener('click', fetchFunction);
var displayStoragevol2 = document.getElementById('displayStoragevol2');
function fetchFunction(){    
   var firstNamevol2 = document.getElementById('firstNamevol2').value;
   var lastNamevol2 = document.getElementById('lastNamevol2').value;
   displayStoragevol2.innerHTML = firstNamevol2 + lastNamevol2;
}
</script>

Since variable firstNamevol2 and lastNamevol2 were in global scope those variables are assigned the values when the page is loaded not when the button is clicked.

answered May 4, 2017 at 9:13

Jayampathy Wijesena

1,7601 gold badge19 silver badges27 bronze badges

Comments

Darren Barklie · Accepted Answer · 2017-05-04 09:44:50Z

You should take care when you are declaring your variables in the process; they should be inside the click event handler.

Below is my working code (with variable and class names tidied).

HTML:

<h3>Input Data</h3>
<label>First Name:</label> <input type="text" id="firstName">
<label>Last Name:</label> <input type="text" id="lastName">
<button type="submit" id="fetchDetails">Fetch Details</button>
<hr>
<h3>Display Data:</h3>
<span id="displayFirstName"></span>
<span id="displayLastName"></span>
<hr>

Javascript:

function fetchData() {
  // On click of Fetch Details
  document.getElementById("fetchDetails").addEventListener("click", function(event){
    event.preventDefault();
    // Assign values to variables
    var firstName = document.getElementById("firstName").value;
    var lastName = document.getElementById("lastName").value;
    // Display values in results field
    document.getElementById("displayFirstName").innerHTML = firstName;
    document.getElementById("displayLastName").innerHTML = lastName;
  });
}
fetchData();

Codepen here

Collectives™ on Stack Overflow

JavaScript code not working when displaying value of html element

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related