So, I have this html
<input type="text" id="textbox" value="">
<span id="currenticon">Test</span>
<a href="#" id="button">Set</a>
<script src="script.js"></script>
and this javascript
if(document.getElementById('button').clicked == true)
{
var inputted = document.getElementById("textbox").getAttribute("value")
document.getElementById("currenticon").innerHTML = inputted;
}
So it is supposed to do:
For example, I type in "Hello" in the textbox and I click the button (the a tag), it should set currenticon’s text to Hello, but it doesn’t for some reason
Edit: I updated the javascript to
if(document.getElementById('button').clicked == true){
var inputted = document.getElementById("textbox").innerText
document.getElementById("currenticon").innerHTML = inputted;
}
I’m not sure if I need to put a ; after the ".innerText" but I put it and it still doesn’t work
Sorry if this is weird, I’m new to javascript 🙂
EDIT: I got it working now
<input type="text" id="textbox" value="">
<span id="currenticon">Test</span>
<span id="button" onclick="recieved()">Set</span>
<script src="script.js"></script>
function recieved() {
var inputted = document.getElementById("textbox").value
document.getElementById("currenticon").innerHTML = inputted;
}
>Solution :
Links do not have a clicked property. If they did, then it would be false at the time your JavaScript runs to test what the value is.
If you want something to happen in response to a click, then you need an event listener.
Links are elements designed to take the user to a new URL. If you want something for the user to click on that does not go to a new URL, then use a <button type="button">, not a link.
The value attribute sets the default value for an element.
Typing into the input does not change the value attribute.
You need the value property.
document.getElementById("textbox").value
The innerText property gives you the descendant nodes of an element converted to plain text.
<p>this text for example</p>
An <input> element doesn’t have descendant nodes so doesn’t have innerText.
You need the value property.
const button = document.getElementById('button');
const input = document.getElementById('textbox');
const icon = document.getElementById('currenticon');
const updateValue = () => {
icon.innerText = input.value;
};
button.addEventListener('click', updateValue);
<input type="text" id="textbox" value="">
<span id="currenticon">Test</span>
<button type="button" id="button">Set</button>