Javascript will not pass information into function from html

Question

Ok so very new to Javascript. Trying to learn the code by simply changing the text on a button using an external javascript file. But I can't even get javascript to read the buttons valueexternally, in Chrome's debug tools I see my button value is btn="". It reads the button object but can't read its properties.

<html>
<head>

    <title> Test  </title>
    <script type="text/javascript" src="Gle.js"></script>
</head>

<body>
    <div><canvas id="Gle" width="800" height="600"></canvas>
</div>
    <div>
        <h2>Enter the mass and coordinates</h2> 
        <input id="txtbox" type="text" /><br/>
        <button id="btn" onclick="change()">Add</button>

    </div>


    </body>
</html>

The Gle.js

"use strict";


function change() {
    var x = document.getElementById("btn").value;
    var elem = document.getElementById("btn");
    var txt = document.getElementById("txtbox");
    txt.text = elem.value;
    elem.value = "Ok";
    }

When I debug the x value it is "", nothing changes on my screen. I am using brackets IDE.

1. Please create a MCVE. This is **not** how you post a proper question on SO. 2. What "value" do you expect the button to have? — Amit, Aug 28 '16 at 23:23
I'm expecting to have the button title "Add" appear from x in the debug watch window. — CromeX, Aug 28 '16 at 23:24
The "id" element has no value. `value` is an attribute. You set it with ``. The "id" element does however have child content. You can access that through the `innerHTML` property. i.e. `document.getElementById("btn").innerHTML` — Tibrogargan, Aug 28 '16 at 23:28

score 8 · Accepted Answer · 2016-08-28T23:33:05.220

8

x is empty because '#btn' doesn't have the 'value' attribute specified. The "Add" string is inside its inner HTML (or text),

alert(document.getElementById("btn").innerText);

And you can index this in the event scope, it's a reference of '#btn', this.innerText.

A alternative is to get the '#btn' child nodes values, which is cross-browser.

alert(this.childNodes[0].nodeValue);

This alert the first text specified in the element inner.

edited Aug 28 '16 at 23:33

answered Aug 28 '16 at 23:25

3

Thanks Guys, this helpful to connect the dots, sometimes one just has to put there thoughts out there. I've noticed that the – CromeX Aug 29 '16 at 09:30
2

@CromeX If you're looking for differences you can check http://stackoverflow.com/q/469059#26818133, this answer has a good quote – Aug 29 '16 at 10:21

score 1 · Answer 2 · answered Aug 28 '16 at 23:25

I'm expecting to have the button title "Add" appear?

The button doesn't have a value attribute so its value property is an empty string.

"Add" is the content of the text node inside the button element.

var x = document.getElementById("btn").firstChild.data;

Arjun · Answer 3 · 2016-08-29T00:02:21.583

0

You can try by assigning value attribute to your button

<button id="btn" onclick="change()" value="Add">Add</button>

edited Aug 29 '16 at 00:02

answered Aug 28 '16 at 23:25

Arjun

226
5
20

score 0 · Answer 4 · answered Jan 28 '17 at 20:10

If you want to update the text of a button based on what's in the input box the code could look like this:

<button id="myButton">Change Me</button>
<input id="myInput" type="text" value="To This"/>

and in the JS:

document.getElementById("myButton").click(function(){
    var inputValue = document.getElementById("myInput").value
    document.getElementById("myButton").innerText = inputValue
    // You could also use 'this' to refer to document.getElementById("myButton"):
    // this.innerText = inputValue
})

Javascript will not pass information into function from html

4 Answers4