我编写了一个简单的页面，其中包含文本框中所写内容的警报。
<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>
问题是警报返回为未定义，除非我这样做；
<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>
我正在尝试使用全局变量而不是本地变量来使其工作。
-编辑-
我将整个脚本移至正文，这似乎已经解决了问题。
最佳答案
问题出在第一个示例中 var sourceTest = "songs/"+ document.getElementById("inputSong").value + ".mp3"; 在页面加载时仅计算一次，由于脚本位于 header 中，因此它在创建 dom 元素之前执行，因此 document.getElementById("inputSong") 将返回 null 导致错误(在浏览器控制台中 Uncaught TypeError: Cannot读取 null 的属性“value”)，因此变量的值变为未定义。
由于您想要获取输入字段的值，因此在这种情况下您确实可以使用全局变量。
<小时/>如果您仍想使用全局变量，则可以将字符串的静态部分存储在全局变量中，并将其用于点击处理程序中的字符串连接，或者使用正则表达式并替换点击处理程序中的模板部分
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>或者
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>关于javascript - 全局变量返回为未定义，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35192780/