全局變量返回未定義狀態
[英]global variables are returning as undefined
問題描述
我編寫了一個簡單的頁面，該頁面可以提醒您文本框中的內容。
<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>
我正在嘗試使用全局變量而不是局部變量來使其工作。
-編輯-
我將整個腳本移至正文，這似乎已解決了該問題。
2 個解決方案
解決方案1
1 2016-02-04 04:57:47
問題出在第一個示例中var sourceTest = "songs/" + document.getElementById("inputSong").value + ".mp3"; 僅在加載頁面時評估一次，因為腳本位於標頭中，因此在創建dom元素之前執行了腳本，因此document.getElementById("inputSong")將返回null並導致錯誤（在瀏覽器控制台中為Uncaught TypeError: Cannot read property 'value' of null ），因此變量的值變得不確定。
由於您要獲取輸入字段的值，因此在這種情況下可以真正使用全局變量。
如果仍要使用全局變量，則可以將字符串的靜態部分存儲在全局變量中，然后將其用於單擊處理程序中的字符串連接，也可以使用正則表達式並替換單擊處理程序中的模板部分
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>
解決方案2
0 2016-02-04 05:32:37
您可以編寫一個有效的腳本
function jukeBox(){ var input = "songs/" +document.getElementById("inputSong").value+ ".mp3"; alert(input); }
函數中未定義的全局變量
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.