我無法獲得JavaScript以正確訪問文本字段

以下是我的問題：我想將文本字段的值輸入到隨機引用的指定位置。但是，當我嘗試使用自己的代碼執行此操作時，JavaScript將只輸入在輸入元素括號內分配的值，並且不會更改爲在輸入字段中輸入的文本。我無法獲得JavaScript以正確訪問文本字段

在我在W3schools發現的例子中，它的工作原理與它應有的相似。當您更改輸入字段中的文本時，具有相應ID的元素中的文本將更改爲該文本。 http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_text_get

這工作：

<!DOCTYPE html> 
<html> 
<body> 

<h3>A demonstration of how to access a Text Field</h3> 

<input type="text" id="myText" value="Some text..."> 

<p>Click the "Try it" button to get the text in the text field.</p> 

<button onclick="myFunction()">Try it</button> 

<p id="demo"></p> 

<script> 
function myFunction() { 
var x = document.getElementById("myText").value; 
document.getElementById("demo").innerHTML = x; 
} 
</script> 

</body> 
</html>

但是，試圖利用這個相同的邏輯，使之與我想要做的工作的時候，這是行不通的。它僅顯示在括號內設置的輸入值。它不會更改爲顯示輸入到輸入字段中的新值。

這不起作用，我不能爲我的生活找出原因。它不會x的值更改爲在輸入區域中輸入的輸入值：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Quotes</title> 
    <script src="jquery.min.js"></script> 
    <script src="quotes.js"></script> 
</head> 
<body> 
<textarea id="txtbox" style="width:600px;" readonly></textarea> 
    <input type="text" id="noun" value="enter noun"> 
    <button onclick="quotes()">Next</button> 
    <script> 

    var x = document.getElementById("noun").value; 

    quote = []; 
    quote[0] = ["First part of quote " + x + " end of quote."]; 
    quote[1] = [x + " end of quote."]; 
    quote[2] = ["Beginning of quote " + x + "."]; 
    quote[3] = ["First part " + x + " end of quote."]; 

    function quotes(){ 
    rdmQuote = Math.floor(Math.random()*quote.length); 
    document.getElementById("txtbox") .value=quote[rdmQuote]; 
    } 

    window.onload=quotes; 

    </script> 
</body> 
</html>

來源

2016-08-20 Liberafied

*「它不會更改爲顯示輸入到輸入字段中的新值。「*你只在頁面加載時獲得文本字段的值**一次**如果你想獲得更新的文本，你需要獲得值並在每次單擊按鈕時構建引號。邏輯轉換爲'quotes' –

這可以幫助我理解錯在哪裏，但我是JavaScript新手，並且不知道如何將所有邏輯轉換爲引號。有人可以建議怎麼做？ – Liberafied

他的意思是將邏輯移動到函數'quotes'中;將它放在兩個大括號之間，每次單擊按鈕時都會執行該操作 – Polyov

您需要將它檢索值到函數quotes，以便它可以每次執行的邏輯按鈕。

function quotes(){ 

    var x = document.getElementById("noun").value; 

... 

    rdmQuote = Math.floor(Math.random()*quote.length); 
    document.getElementById("txtbox") .value=quote[rdmQuote]; 
}

你還創建通過放置括號每串一個多維數組，這就是爲什麼當打印托架，你打印一個數組。

刪除括號：

quote = []; 
quote[0] = "First part of quote " + x + " end of quote."; 
quote[1] = x + " end of quote."; 
quote[2] = "Beginning of quote " + x + "."; 
quote[3] = "First part " + x + " end of quote.";

來源

2016-08-20 17:16:53 Polyov

雖然你是正確的，但這不是OP的問題。 –

@FelixKling不知道我在哪裏閱讀有關括號的問題，謝謝指出 – Polyov

正如Felix Kling在評論中指出，移動所有的邏輯到quotes()功能將解決這個問題，使quote數組被更新每次調用該函數時。

這是您的演示代碼是什麼樣的建議修改後：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Quotes</title> 
    <script src="jquery.min.js"></script> 
    <script src="quotes.js"></script> 
</head> 
<body> 
<textarea id="txtbox" style="width:600px;" readonly></textarea> 
    <input type="text" id="noun" value="enter noun"> 
    <button onclick="quotes()">Next</button> 
    <script> 

    function quotes(){ 
     var x = document.getElementById("noun").value; 

     quote = []; 
     quote[0] = ["First part of quote " + x + " end of quote."]; 
     quote[1] = [x + " end of quote."]; 
     quote[2] = ["Beginning of quote " + x + "."]; 
     quote[3] = ["First part " + x + " end of quote."]; 


     rdmQuote = Math.floor(Math.random()*quote.length); 
     document.getElementById("txtbox") .value=quote[rdmQuote]; 
    } 

    window.onload=quotes; 

    </script> 
</body> 
</html>

來源

2016-08-20 22:54:44

使用JavaScript的主要問題是，你有一些代碼放在功能quote外，沒事的時候應該是在它之外。也

function quotes() { 
    var x = document.getElementById("noun").value; 
    var quote = []; 
    quote[0] = "First part of quote " + x + " end of quote."; 
    quote[1] = x + " end of quote."; 
    quote[2] = "Beginning of quote " + x + "."; 
    quote[3] = "First part " + x + " end of quote."; 
    var rdmQuote = Math.floor(Math.random()*quote.length); 
    document.getElementById("txtbox").value=quote[rdmQuote]; 
}

注意，我添加了var關鍵字，在quote = []和rdmQuote = Math.floor(Math.random()*quote.length)前：所有這一切都是在函數外的行應該被移動到它裏面，像這樣。每次聲明新變量時，都應使用var關鍵字。請注意，我也刪除了括號，正如Polyov所建議的那樣。

您也不需要window.onload=quotes;這行可以安全地刪除這樣一個小網頁。當您開始開發具有大量元素的較大網頁時，您只需要window.onload。

這些修復程序將解決您的問題，但代碼中還存在其他一些問題 - 沒有什麼可以展示的，只是主要涉及編碼風格的方面。

來源

2016-08-20 23:56:07 Steve

我無法獲得JavaScript以正確訪問文本字段

回答

相關問題