global variables are returning as undefined
Question
I've written a simple page that has an alert of whatever's written in the text box.
<html>
<head>
<script language="javascript">
var sourceTest = "songs/" + document.getElementById("inputSong").value + ".mp3";
function jukeBox()
{
alert(sourceTest);
}
</script>
</head>
<body>
<input type="text"; id="inputSong" style="display: inline; float: left";></input>
<button
id="butter";
type="button";
onclick="jukeBox()";
style="display: inline; margin-left: 5px; float: left">
Play
</button>
</body>
</html>
The problem is that the alert is returning as undefined, unless I do this;
<html>
<head>
<script language="javascript">
function jukeBox()
{
var sourceTest = "songs/" + document.getElementById("inputSong").value + ".mp3";
alert(sourceTest);
}
</script>
</head>
<body>
<input type="text"; id="inputSong" style="display: inline; float: left";></input>
<button
id="butter";
type="button";
onclick="jukeBox()";
style="display: inline; margin-left: 5px; float: left">
Play
</button>
</body>
</html>
I am trying to get this to work using a global variable, instead of a local one.
-Edit-
I moved the entire script to the body, and that appears to have fixed the problem.
2 answers
solution1
1 2016-02-04 04:57:47
The problem is in the first example var sourceTest = "songs/" + document.getElementById("inputSong").value + ".mp3"; is evaluated only once when the page is loaded, since the script is in header it is executed before the dom element is created so document.getElementById("inputSong") will return null causing an error(in your browser console Uncaught TypeError: Cannot read property 'value' of null ) so the value of the variable becomes undefined.
Since you want to fetch the value of the input field, you can really uses global variable in this case.
If you still want to use a global variable, you can either store the static parts of the string in a global variable and use it for string concatenation in the click handler or use a regex and replace a template part in the click handler
var prefix = "songs/", suffix = ".mp3"; function jukeBox() { var sourceTest = prefix + document.getElementById("inputSong").value + suffix; alert(sourceTest); }
<input type="text" ; id="inputSong" style="display: inline; float: left" ;/> <button id="butter" ; type="button" ; onclick="jukeBox()" ; style="display: inline; margin-left: 5px; float: left"> Play </button>
Or
var sourceTest = "songs/{inputSong}.mp3"; function jukeBox() { var value = sourceTest.replace(/\\{inputSong\\}/, document.getElementById("inputSong").value) alert(value); }
<input type="text" ; id="inputSong" style="display: inline; float: left" ;></input> <button id="butter" ; type="button" ; onclick="jukeBox()" ; style="display: inline; margin-left: 5px; float: left"> Play </button>
solution2
0 2016-02-04 05:32:37
you can write a script it's working
function jukeBox(){ var input = "songs/" +document.getElementById("inputSong").value+ ".mp3"; alert(input); }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.