Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Button that detects for value

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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>
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading