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.
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.
Share Improve this question asked Aug 28, 2016 at 23:19 CromeXCromeX 4451 gold badge7 silver badges20 bronze badges 4-
1
Why not just use the
thiskeyword to get the button? – Andrew Li Commented Aug 28, 2016 at 23:21 - 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 Commented Aug 28, 2016 at 23:23
- I'm expecting to have the button title "Add" appear from x in the debug watch window. – CromeX Commented Aug 28, 2016 at 23:24
-
3
The "id" element has no value.
valueis an attribute. You set it with<tag value="xxx">. The "id" element does however have child content. You can access that through theinnerHTMLproperty. i.e.document.getElementById("btn").innerHTML– Tibrogargan Commented Aug 28, 2016 at 23:28
4 Answers
Reset to default 8x 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.
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;
You can try by assigning value attribute to your button
<button id="btn" onclick="change()" value="Add">Add</button>
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
})