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.
4 Answers
Answers 1
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.
Answers 2
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 }) Answers 3
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; Answers 4
You can try by assigning value attribute to your button
<button id="btn" onclick="change()" value="Add">Add</button> 
0 comments:
Post a Comment