通过onclick获得价值

Question

 var change = document.getElementById('pounds'); var click = document.getElementById('convert'); click.addEventListener('click', test(e)); function test(e) { change.addEventListener('input', function(e) { let lbs = e.target.value; document.getElementById('ounce').innerHTML = lbs * 16; }); } 

 <input type="text" placeholder='convert' id='pounds'> <p>Your conversion: </p> <p id='ounce'></p> <button id="convert" onclick="test()">Convert Now</button> 

I'm fairly new to JS and I'm learning by building simple stuff. I am trying to build a pounds to ounces converter, and I know how to get the real time value as I type but I want to get the result after I click a button. My code kind of works.. You have to click the button before you type but that's not what I'm looking for. I want to get the value only by clicking the button.

I apologize if this a simple question but I can't seem to figure it out, haha.

Answer 1

I see a few things going on that I wanted to bring up. First, below I'm going to attach a refactored version of the code and explain why I went about certain things the way I did.

 const conversionButton = document.getElementById('convert-button'); const conversionDisplay = document.getElementById('conversion-display'); const userInput = document.getElementById('pounds-input'); conversionButton.addEventListener('click', convertPoundsToOunces); function convertPoundsToOunces() { let lbs = userInput.value; conversionDisplay.innerHTML = lbs * 16; } 

 <input type="text" placeholder="convert" id="pounds-input"> <p>Your conversion: </p> <p id="conversion-display"></p> <button id="convert-button">Convert Now</button> 

The first thing I thought of was that you had the test function being executed inside the addEventListener method. You want to reference the function there instead, so you would do

click.addEventListener('click', test);

instead of:

click.addEventListener('click', test());

or in this case with the new variable names:

conversionButton.addEventListener('click', convertPoundsToOunces);

This way it is called at the time of the button being clicked.

I noticed you were using the onclick attribute as well. There is no need to have that there too. We simply want to add an event listener so our click handler function is ran when the button is clicked. We have access to the value of the input as well, so no need for e.target.value. In this case userInput.value will pull the value inside the text input when convertPoundsToOunces is called.

Some last thoughts and suggestions: Change the variables up top to consts. The mixture of single quotes and double quotes inside the html attributes is a little weird. I generally stick with double quotes for html at all times. Lastly on the same note, I like naming my variables very semantic names. Annnndddd finally think about how we could protect against when a user types in something besides a Number. Hope this was helpful!

Answer 2

Your second eventListener is listening for change to pounds. Just remove it:

 var change = document.getElementById('pounds'); var click = document.getElementById('convert'); click.addEventListener('click', test); function test(e) { let lbs = change.value; document.getElementById('ounce').innerHTML = lbs * 16; } 

 <input type="text" placeholder='convert' id='pounds'> <p>Your conversion: </p> <p id='ounce'></p> <button id="convert" onclick="test()">Convert Now</button> 

Answer 3

There are a couple of issues here. The main one is that you're executing the test function immediately rather than setting it as an event handler:

click.addEventListener('click', test(e));

Instead of executing the function, just reference it:

click.addEventListener('click', test);

Additionally, inside the function you don't actually perform the calculation. Instead, you're only setting the change handler to the text input. (Which is why you need to click the button before the text starts updating.) Remove that handler and just invoke the logic directly:

function test(e) {
  let lbs = e.target.value;
  document.getElementById('ounce').innerHTML = lbs * 16;
}

Finally, in this case e isn't going to contain what you expect. But fortunately you don't need to use it at all anyway. You already have a reference to the element you need in the change variable:

function test() {
  let lbs = change.value;
  document.getElementById('ounce').innerHTML = lbs * 16;
}

Example