Transfering the value from HTML input element into Javascript

[Connor]

I am struggling to understand the best practice / why I am having issues getting the value of the HTML input element into Javascript.

My code so far:
HTML:

"<"input type=“number” id=“cash”/>
“<“button id=“purchase-btn” type=“submit”>Purchase”<”/button >

(opening < in “” so that it is visible)

Javascript:
const purchaseBtn = document.getElementById(“purchase-btn”);
const checkInput = () => {
const input = document.getElementById(“cash”);
const inputNumber = input.value;
console.log(inputNumber)
};
purchaseBtn.addEventListener(“click”, checkInput());

*/ No matter whereI put the constants or event listener (inside or outside of the function / above or below the function or even removing the function completely) the console log is empty when I input a number in the html and click on the submit button.

Hopefully it’s something obvious that I have overlooked.

Thanks in advance for the help

[luisclaudioc]

In order to get the new value of an input element, you must first check its value. HTML doesnt do that for you automatically. You can do that using a “change” listener or onchange attribute, and the event.target.value. Ex:

<p>Modify the text in the input field to change me.</p>

<input type="text" name="txt" onchange="myFunction(event)">

<script>
function myFunction(e) {
  const pElement = document.querySelector("p");
  pElement.innerText = e.target.value;
  console.log("input value: " + e.target.value)
}
</script>

[Connor]

Thanks for the response!

Is my purchaseBtn.addEventListener(“click”, checkInput); not doing the same thing as the proposed onchange=“myFunction(event)”?

What I want is that when the user clicks the purchaseBtn the value which is entered in the input element of the HTML comes through to Javascript as my input constant. At the moment this does not seem to be working with my code and I’m not sure what the issue is.

This was the solution proposed on another site I came across:
"// HTML // JavaScript const input = document. getElementById(“myInput”); const inputValue = input. "
I believe I have done this but the value does not seem to be coming through.

[luisclaudioc]

okay, you are right. the submit button click event listener IS enough to access the input.value. my bad!
i brought the code that you wrote to codepen, to see what was happening and now it works. seems like the problem are your quotation marks. look closely that these " " (correct for js) are different from these “ ” (that you are using in your code).

This works:

// HTML
<input type="number" id="cash"/>
<button id="purchase-btn" type="submit">Purchase</button>

// JS
const purchaseBtn = document.getElementById("purchase-btn");
const input = document.getElementById("cash");
purchaseBtn.addEventListener("click", () => {
  console.log(input.value)
});

[ILM]

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

[lucatardi]

@Connor

purchaseBtn.addEventListener(“click”, checkInput());

Hey @Connor an issue that is see in this line of your code snippet is that you are executing the function checkInput rather than passing it down as a callback for the addEventListener.

purchaseBtn.addEventListener("click", checkInput);

[Connor]

Thanks, I have made that change purchaseBtn.addEventListener(“click”, () => checkInput()); but still no better I am afraid.

The constants are also behaving strangely. In my screenshot below you can see that none of the references to constants get highlighted in the code when I click on them. With the exception of innerDisplay which seems to be working normally. What could be the cause of this?

[ILM]

@Connor

Thanks, I have made that change purchaseBtn.addEventListener(“click”, () => checkInput()); but still no better I am afraid.

double check the change you are suggested, because it’s not it

[Connor]

I think I have the right solution for calling the function in the eventlistener now (see code below).

Unfortunately it would appear that I am still not getting the correct input value. The console.log(inputNumber); is giving NaN regardless of the value I put in the HTML input field.

let price = 1.87;
let cid = [
  ["PENNY", 1.01],
  ["NICKEL", 2.05],
  ["DIME", 3.1],
  ["QUARTER", 4.25],
  ["ONE", 90],
  ["FIVE", 55],
  ["TEN", 20],
  ["TWENTY", 60],
  ["ONE HUNDRED", 100]
];

const purchaseBtn = document.getElementById("purchase-btn");; 
const changeDueDiv = document.getElementById("change-due");
const innerDisplay = document.getElementById("inner-display");
const input = document.getElementById("cash");
const inputNumber = input.valueAsNumber;
const totalCID = cid.map((arr) => arr[1]).reduce((acc, curr) => acc + curr, 0).toFixed(2);
innerDisplay.textContent = "Price: $" + price;

console.log(inputNumber);

purchaseBtn.addEventListener("click", () => {
if (inputNumber === 0) {
  changeDueDiv.textContent = "Please enter a number."; 
  return
}
else if (inputNumber - inputNumber.toFixed(2) !== 0) {
  changeDueDiv.textContent = "Please enter a number with up to 2 digits after the decimal place"; 
  return
}
else if (totalCID < inputNumber - price) {
  changeDueDiv.textContent = "Status: INSUFFICIENT_FUNDS"; 
  return}
else if (price === inputNumber) {
  changeDueDiv.textContent =  "Status: CLOSED"
}
else {change()}
}
);

function change () {
  const hundredRemainder = inputNumber % 100;
  changeDueDiv.textContent =  "You got to changed"
}

[ILM]

@Connor

const inputNumber = input.valueAsNumber;

when do you think this get a value? and can the value change?

[Connor]

Thanks ilenia and everyone for your help! With my updated function and let statement inside the function everything is working as it should. More importantly I understand what was going wrong to hopefully avoid repeating the same mistakes