자바 스크립트 양식에 조건문 연결

Question

저는 방금 자바 스크립트를 배우기 시작했습니다. 양식에 입력 된 숫자에 따라 일부 텍스트를 빨간색 또는 파란색으로 바꿀 조건을 만들려고하는데 작동하지 않고 그 이유를 알 수 없습니다. 입력 할 때마다 텍스트가 파란색으로 바뀔 때마다 입력됩니다. 입력 한 번호가이 내가 가지고있는 적은 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>