這個基本的Javascript代碼有什麼問題？

-6

我正在看一個關於JavaScript的基本教程系列，並且一直被困在這個超級簡單的腳本上，現在已經接近30分鐘了。我使用了一個HTML驗證器，它全部檢出沒有錯誤。但是，代碼仍然不能按照視頻的方式表現出來。這個基本的Javascript代碼有什麼問題？

當您鍵入「點擊我」時，它應該顯示一個對話框，指出「請在框中輸入實際值」。當你在該領域輸入一個值時，應該用標題代替你輸入的值。

對不起，我簡單nooby問題

再次編輯：謝謝阿拜。這讓它工作。

<!DOCTYPE html> 
<html> 
<head> 
    <title>JavaScript Example</title> 
    <script type="text/javscript"> 
    function substitute() { 
     var myValue = document.getElementById(myTextBox).value; 

     if (myValue.length == 0){ 
      alert('Please enter a real value in the text box!'); 
      return; 
     } 
     var myTitle = document.getElementById('title'); 
     MyTitle.innerHTML = myValue; 
    } 
    </script> 
</head> 
<body> 
    <h1 id="title">JavaScript Example</h1> 

    <input type="text" id="myTextBox" /> 
    <input type="submit" value="Click Me" onclick="substitute()" /> 
</body> 
</html>

來源

2017-01-02 Aspen

我建議你修改你的問題，增加實際的代碼中，我們可以看一下。 – junkfoodjunkie

^^^只是會說。你有通過* JavaScript *驗證器嗎？你把它扔到小提琴裏了嗎？ – arbybruce

歡迎來到SO ,,參見[如何提問]（http://stackoverflow.com/help/how-to-ask）來學習如何提出關於SO –

我發現一些問題與您的代碼，只是簡單的東西，每一個初學者經歷（我做了），我會彈不送：

MyTitle不myTitle，JavaScript的變量是區分大小寫的。
您應該遠離從onclick屬性;他是一個不好的影響。這一點，內聯JS通常不是一個好主意。
因此，我添加了事件監聽器事件：[...].addEventListener("click", callback);
您的DOM請求到輸入框使用未定義的變量/對象/等。稱爲myTextBox，而不是字符串"myTextBox"。

無論如何，我做了一個的jsfiddle的代碼，所以我可以測試它，所以這裏是鏈接到與我上面所解釋的編輯代碼：https://jsfiddle.net/Lktzw0Lh/

來源

2017-01-02 01:11:41 arbybruce

確定這是完美的，我可以理解你說的話，不知道爲什麼教程提出了內聯代碼，如果它不是很好的做法，我知道事件監聽器做了什麼以及它如何引用函數「substitute」。我不明白的是什麼目的ID'ing 「submit」在JavaScript中，綠色代碼是一種單詞值類型的權利，那麼ID做什麼呢？它是完全不同的東西，因爲我們定義爲「替代」的函數似乎是在這裏被調用的東西 – Aspen

@ Aspen ID只是任意值的字符串（* id est *它們可以是任何你想要的），唯一標識該元素.ID只能在一個元素上使用一次，*本身*所以你可以改變ID從「提交」到任何內容，只需更改中的參考該腳本，它的工作原理是一樣的。 ID通常用於引用特定元素，無論是在CSS還是JS中。在這個代碼的情況下，它不會改變任何東西，除非可以通過'document.getElementById（「id」）''來參考。 – arbybruce

如果您不熟悉HTML ID並使用它們，我推薦閱讀[本教程]（http://www.w3schools.com/TAgs/att_id.asp） – arbybruce

一個稍微不同的方式 - 因爲你列出jQuery的標籤爲此 - 我已經調整了代碼以利用它。我在按鈕上放置了一個onclick事件處理程序，當單擊該按鈕時獲取文本框的值，如果它爲空，則會提供警報。如果它不爲空 - 它會交換輸入文本的h1文本，並清除文本輸入併爲其提供焦點，以便重新輸入新內容。

請注意，點擊處理程序是在JavaScript部分，而不是內聯js和jQuery的 - 你可以鏈接在一起影響相同元素的命令。

$(document).ready(function(){ 
 
    $('#testButton').click(function(){ 
 
    var myValue = $('#myTextBox').val(); 
 
    if (myValue == ''){ 
 
    alert('Please enter a real value in the text box!');$('#myTextBox').focus() 
 
    }else{ 
 
    $('#title').text(myValue);$('#myTextBox').val('').focus() 
 
    } 
 
}) 
 
})

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>JavaScript Example</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
    <h1 id="title">JavaScript Example</h1> 
 

 
    <input type="text" id="myTextBox" /> 
 
<button id="testButton" type="button">Click Me</button> 
 
</body> 
 
</html>

來源

2017-01-02 01:21:35 gavgrif

這個基本的Javascript代碼有什麼問題？

回答

相關問題