변수로 제출에 제공된 번호 사용?

Question

해결 방법 이해에 도움이 필요합니다.

<p> Enter a number in the box. </p> 

<div> 
    <label for ="numberSubmitted"> Number: </label> 
    <input type="text" class="numberSubmitted">  
    <input type = "submit" value="Submit"> 
</div> 

<div> 
    <p class="message"></p> 
</div> 

var numberSubmitted = Number(numberSubmitted.value); 
var message = document.querySelector(".message"); 

if(numberSubmitted > 100) { 
message.textContent = "You won!"; 
} else { 
message.textContent = "You lose!"; 
} 

"You Lose!" 난 그냥 작동하지 않습니다

var numberSubmitted = Number(numberSubmitted.value) 

코드에

var numberSubmitted = Number() 

변화를 것처럼 변수를두면 인쇄되고있다.

클래스에 Number()를 사용하는 방법을 안내하는 가이드가 온라인에 표시되지 않습니다. Number 메서드를 정의 할 때 클래스를 포함 할 때 누구나 올바른 방향을 가르쳐 주시겠습니까?

Answer 1

그래서 몇 가지가 있습니다 :

1. 라벨에 ID가 아닌 클래스를 가리 키도록해야합니다 "를".

2. NumberSubmitted.value를 Number()에 넣으려고하면 작동하지 않는 문제가 numberSubmitted가 정의되지 않았기 때문에이를 수정하려면 입력 상자의 html 요소를 가져 와서 .value를 수행해야합니다.

3. 스크립트 태그에 자바 스크립트를 넣어야합니다.

는 다음을 시도해보십시오

<p> Enter a number in the box. </p> 

<div> 
    <label for="numberSubmitted"> Number: </label> 
    <input type="text" id="numberSubmitted"> 
    <input type = "submit" value="Submit" onclick="submit()"> 
</div> 

<div> 
    <p class="message"></p> 
</div> 

<script> 
function submit() { 
    var numberSubmitted = Number(document.getElementById('numberSubmitted').value); 
    var message = document.querySelector(".message"); 

    if(numberSubmitted > 100) { 
    message.textContent = "You won!"; 
    } else { 
    message.textContent = "You lose!"; 
    } 
} 
</script> 

Answer 2

가 여기에 또 다른 옵션들, 인라인 함수 호출 대신 이벤트 리스너를 사용하여 :

JS Fiddle Demo here합니다.

HTML

<p> Enter a number in the box. </p> 

<div> 
    <label for="numberSubmitted"> Number: </label> 
    <input type="text" id="numberSubmitted"> 
    <input type="button" id="myBtn" value="Submit"> 
</div> 

<div> 
    <p class="message"></p> 
</div> 

JS 이전에 내 의견에서 언급 한 바와 같이

//bind the listener to the button 
document.getElementById('myBtn').addEventListener('click', myFunction); 
//get the input element 
var el = document.getElementById('numberSubmitted'); 

function myFunction() { 
    var numberSubmitted = Number(el.value); 
    //for debug 
    console.log(numberSubmitted); 
    var message = document.querySelector(".message"); 
    if (isNaN(numberSubmitted)) { 
    message.textContent = "That isn't a number."; 
    return; 
    } 
    if (numberSubmitted > 100) { 
    message.textContent = "You won!"; 
    } else { 
    message.textContent = "You lose!"; 
    } 
} 

, 당신은 스크립트 태그에 JS를 포장해야합니다. 위의 코드 세그먼트에서 다른 의견을 남겼습니다. 원본 JS를 스크립트 태그로 묶는 것만으로는 충분하지 않다는 것을 알 수 있습니다. numberSubmitted 요소와 관련된 '정의되지 않은'오류가 여전히 있습니다. 이것은 JS가 어떤 것을 알지 못하기 때문입니다. numberSubmitted - DOM에서 요소를 찾아서 변수에 할당해야합니다. 위의 방법을 보여주었습니다.