Input text via Javascript ECMAscript problem

Question

I'm learning Javascript and I'm trying to input a text in a field, click on a button and change a paragraph innerHTML.

I've already done that successfully. But now I want to make a correction on the field, but when I click the button, nothing happens.

//These are the variables
var name = document.getElementById("name").value;
var bt = document.getElementById("bt");
var para = document.querySelector("p#paragraph");

//event calls the insert().
bt.addEventListener("click", insert);

//The function changes the innerHTML
function insert() {
  para.innerHTML = name;
}

//The textfield to input the name
<input type="text" id="name" placeholder="Your name here"> <br> //The button
<input type="button" value="Click" id="bt"> //The Paragraph to be changed
<p id="paragraph">...</p>

Ananda Masri · Accepted Answer · 2019-11-18 21:28:56Z

1

It's not working because your name variable is assigned once at initial script execution before the button is clicked and before the input is filled by the user.

To make it work, move var name = document.getElementById("name").value; inside function insert() so that name is assigned whenever the button is clicked.

Here's a working fiddle.

edited Nov 18, 2019 at 21:28

answered Nov 18, 2019 at 21:23

Ananda Masri

4033 silver badges9 bronze badges

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

Comments

matthew-e-brown · Accepted Answer · 2019-11-19 15:31:30Z

JS is run when its script tag is loaded by the browser. Your problem is that, when the page loads, you're setting the value of name to the current value of the text field (which is empty when it loads). Move

var name = document.getElementById("name").value;

into the event listener and it should work.

Here is a tidied version:

const name = document.querySelector('#name');
const bt = document.querySelector("#bt");
const para = document.querySelector('p#paragraph');

bt.addEventListener("click", function() {
  para.innerHTML = name.value;
});

// Alternatively, if you don't care for IE
// bt.addEventListener("click", () => para.innerHTML = name.value);

<!-- The textfield to input the name -->
<input type="text" id="name" placeholder="Your name here">
<br />
<input type="button" value="Click" id="bt"> <!-- The button -->
<p id="paragraph">...</p> <!-- The Paragraph to be changed -->

Collectives™ on Stack Overflow

Input text via Javascript ECMAscript problem

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related