JavaScript代碼不工作，林不知道爲什麼

繼承人的HTML：JavaScript代碼不工作，林不知道爲什麼

<!doctype html> 
<head> 
    <title>Food Saver</title> 
<script src="mycode.js"></script> 
</head> 

<body> 
    <form> 
    <input type="text" id="foodInput" placeholder="Enter food"> 
    <input type="button" id="addFood" value="Add Food"> 
    </form> 
    <ul id="foodList"> 
    </ul> 
</body> 
</html>

和繼承人的JavaScript的鏈接到它：

window.onload=init; 
function init(){ 
    var addFoodButton = getElementById("addFood"); 
    addFoodButton.onclick = handleAddFoodButtonClick; 
} 
function handleAddFoodButtonClick(){ 
    var textInput=getElementById("foodInput"); 
    var food = textInput.value; 

    if(food===""){ 
    alert("Please enter a food"); 
    } 
    else{ 
    var li = document.createElement("li"); 
    li.innerHTML=food; 
    var ul = getElementById("foodList"); 
    ul.appendChild(li); 
    } 
}

爲什麼當我嘗試並提交食品值或空串什麼也沒有發生，什麼是我的代碼錯誤

來源

2013-12-19 Justin

凡'getElementById'定義？或者你錯過了'document.' – PSL

閱讀錯誤控制檯。這將拋出一個ReferenceError，如果沒有別的。 – user2864740

討厭這個人，但你應該使用jQuery。 – shriek

試試這個

window.onload=init; 
function init(){ 
    var addFoodButton = document.getElementById("addFood"); 
    addFoodButton.onclick = handleAddFoodButtonClick; 
} 
function handleAddFoodButtonClick(){ 
    var textInput=getElementById("foodInput"); 
    var food = textInput.value; 

    if(food===""){ 
    alert("Please enter a food"); 
    } 
    else{ 
    var li = document.createElement("li"); 
    li.innerHTML=food; 
    var ul = document.getElementById("foodList"); 
    ul.appendChild(li); 
    } 
}

周

來源

2013-12-19 02:02:29 HICURIN

至少在其他兩個地方也是不正確的。請務必提供有關如何解決此類問題的說明。 – user2864740

的getElementById應的document.getElementById：

window.onload=init; 
function init(){ 
    var addFoodButton = document.getElementById("addFood"); 
    addFoodButton.onclick = handleAddFoodButtonClick; 
} 
function handleAddFoodButtonClick(){ 
    var textInput = document.getElementById("foodInput"); 
    var food = textInput.value; 

    if(food===""){ 
    alert("Please enter a food"); 
    } 
    else{ 
    var li = document.createElement("li"); 
    li.innerHTML=food; 
    var ul = document.getElementById("foodList"); 
    ul.appendChild(li); 
    } 
}

來源

2013-12-19 02:03:58 fanfavorite

+1 http://jsfiddle.net/pVTp7/ – iambriansreed

每當你沒有看到什麼是錯的，這是一個好主意，把你的代碼放到JSLint，不停的按JSLint的按鈕，直到它不會給你任何錯誤（或者您決定忽略或禁用某些警告）。

它可以很快教你很多。我剛剛這樣做，並提出了JSLint的建議。

function handleAddFoodButtonClick() { 
    'use strict'; 

    var food = document.getElementById('foodInput').value; 

    // if variable is false, zero, null, undefined, empty string or NaN, it's false 
    if (!food) { 
     alert('Please enter a food'); 
    } else { 
     var li = document.createElement('li'); 
     li.innerHTML = food; 
     document.getElementById('foodList').appendChild(li); 
    } 
} 

function init() { 
    'use strict'; 
    var addFoodButton = document.getElementById('addFood'); 
    addFoodButton.onclick = handleAddFoodButtonClick; 
} 

window.onload = init;

你也可以粘貼你的代碼JSHint，其實跟你原來的代碼這給了3個錯誤：

One undefined variable 
3 getElementById 
7 getElementById 
16 getElementById

來源

2013-12-19 03:06:04

JavaScript代碼不工作，林不知道爲什麼

回答

相關問題