連接條件語句以形成javascript

Question

我剛開始學習javascript。我試圖創建一個條件，將文本轉換爲紅色或藍色取決於輸入到表單中的數字，但它不工作，我不明白爲什麼。無論輸入什麼號碼，每次文字變成藍色。它應該變成紅色，如果輸入的數字小於50。這是我：

var form = document.querySelector("form"); 
 
form.addEventListener("submit", function(event) { 
 
    event.preventDefault(); 
 
}); 
 

 
var input = document.getElementById("input"); 
 

 
var submit = document.getElementById("submit"); 
 

 
submit.onclick = function() { 
 
    if (input >= 50) { 
 
    document.getElementById("color").style.color = "red"; 
 
    } else { 
 
    document.getElementById("color").style.color = "blue"; 
 
    }; 
 
}

<h3 id="color">Conditional Example</h3> 
 
<form name="form"> 
 
    <input type="text" id="input"><br> 
 
    <button type="submit" id="submit">Submit</button> 
 
</form>

Answer 1

您需要輸入元素的值。

var form = document.querySelector("form"); 
 
form.addEventListener("submit", function(event) { 
 
    event.preventDefault(); 
 
}); 
 
var submit = document.getElementById("submit"); 
 
submit.onclick = function(event) { 
 
    // getting the value after click of the button 
 
    var input = document.getElementById("input").value; 
 

 
    if (input >= 50) { 
 
    document.getElementById("color").style.color = "red"; 
 
    } else { 
 
    document.getElementById("color").style.color = "blue"; 
 
    }; 
 
}

<h3 id="color">Conditional Example</h3> 
 
<form name="form"> 
 
    <input type="text" id="input"><br> 
 
    <button type="submit" id="submit">Submit</button> 
 
</form>

Answer 2

document.getElementById("input")得到實際元素。您需要該元素的值，因此請使用document.getElementById("input").value。你還需要檢查的每次點擊的價值，所以你需要將你的點擊處理程序中該行：

var form = document.querySelector("form"); 
 
form.addEventListener("submit", function(event) { 
 
    event.preventDefault(); 
 
}); 
 

 
var submit = document.getElementById("submit"); 
 

 
submit.onclick = function() { 
 
    var input = parseInt(document.getElementById("input").value, 10); 
 
    if (input >= 50) { 
 
    document.getElementById("color").style.color = "red"; 
 
    } else { 
 
    document.getElementById("color").style.color = "blue"; 
 
    }; 
 
}

<h3 id="color">Conditional Example</h3> 
 
<form name="form"> 
 
    <input type="text" id="input"><br> 
 
    <button type="submit" id="submit">Submit</button> 
 
</form>