I have grabbed a value from an in input box many times before, but don’t know whats going on. I want to grab the value only of what I type inside the input box after clicking the plus button, but the console keeps logging “prod”. Is anyone else seeing this or is there something wrong with my bowser? ( or maybe code??)
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Scratchboard</title>
</head>
<body>
<input type="text">
<button id="add-btn">+</button>
<h1>List</h1>
<ol>
<li>
<p>Coffee</p><button id="remove-btn">-</button>
</li>
</ol>
<script src="index.js"></script>
</body>
</html>
CSS
li {
display: flex;
align-items: center;
}
li button {
height: 20px;
margin-left: 20px;
}
JS
// SCRATCHBOARD - write, erase, or don't erase and come back to it later.
let userInput = document.querySelector('input')
let inputValue = userInput.value
let addItemBtn = document.getElementById('add-btn')
let removeItemBtn = document.getElementById('remove-btn')
let newLi = "Hi, Im Li"
addItemBtn.addEventListener('click', (event) => {
if (event.target === addItemBtn) {
// if the target of my mouse click lands on the add button on the browser then something should do something..
// that something would be to add the input value into the list item
}
console.log("inputValue: ", inputValue);
console.log("I am event listener not in a function so I will log: ", newLi);
})
removeItemBtn.addEventListener('click', (event) => {
if (event.target === removeItemBtn) {
// if the target of my mouse click lands on the remove button on the browser then something should do something..
// that something would be to remove the input value into the list item
}
})
I don’t see that. Did you post all your code?
You need to get the value inside the click handler, not just one time when the code first runs.
Hi , yes thats all of the code. Thats really wierd. I keep getting either undefined or the word “prod” when trying to use .value in different spots.
Would you be able to confirm to me that you are receiving a value in your console that you personally typed in yourself?
I don’t see how or where that would come from with the code you have posted. You should be getting an empty string.
As I said, you need to get the value inside the click handler. You can’t just get the value one time, you need to get it when the user clicks the button.
I did that too, but still nothing. If I make the addItemBtn event listener look like this instead it still wont give me a value even though the code is correct. Swap the other addItemBtn block from the original code out with this block here below.
Are you receiving the value Zebra if you type in Zebra manually in the input box inside the browser?
addItemBtn.addEventListener('click', (event) => {
console.log("This button is being clicked which means inputValue will show its value");
console.log("inputValue: ", inputValue);
})
You are still not getting the current value. inputValue is that userInput.value is at the start of the code.
You need this inside the handler function
let inputValue = userInput.value
1 Like
This is what you meant right? the photo I have above?
1 Like
Yes. I don’t know where you are getting that value from.
Unless you upload this to GitHub and I can reproduce what you are seeing I have no real way of helping.
-
Does it happen every time or only the first time you get the value?
-
Does it happen no matter how you open the HTML?
-
Does it happen in other browsers?
-
If you recreate everything from scratch again in a new location, does it still happen?
Hi, I shared with a friend and they dont get the same issue. very strange.
- every time yes
- no matter what yes
- i only use chrome
- I have tried recreating from scratch
Try it in an Incognito window with no extensions running.
