innerHTML을 변수

Question

자바 스크립트가 인쇄되지 않습니다 -이 코드를 가지고 :

[object HTMLInputElement] 

왜이 대신 내 변수를 인쇄하지 않습니다 나는 calculate 버튼을 누를 때 나는 다음과 같은 메시지가

<form id="form">A: <input id="k" name="k" step=".1" type="number" value="20" width="5" /></form> 

<button onclick = "calc()"> calculate </button> 

<script> 
function calc() { 
var k = document.getElementById("k"); 
document.getElementById("b").innerHTML = k; 
} 
</script> 
<p id="b"></p> 

을 k 하단의 HTML은 어디입니까?

Answer 1

요소 자체가 아니라 요소의 .value 속성을 원합니다.

var k = document.getElementById("k").value; 

Answer 2

는 k는 HTMLInputElement이기 때문에, 그리고 HTMLInputElements의 있으며, toString는 "[object HTMLInputElement]"를 반환합니다. 당신이 그 요소의 value를 얻고 싶다면 다음의 value 속성을 사용 :

var k = document.getElementById("k").value; 

Answer 3

당신은 값에 액세스해야합니다. 현재 Dom 요소 전체에 액세스하고 있습니다. k.value를 호출해야합니다.

Answer 4

이 함수는 getElementById()이라는 요소를 반환한다는 것을 의미합니다.

<input/> 요소는, 그래서 여기에 입력 요소의 값을 포함하는 .value 속성이 코드의 작업입니다 : 또한

<form id="form">A: 
    <input id="k" name="k" step=".1" type="number" value="20" width="5" /> 
</form> 

<button onclick="calc()"> calculate </button> 

<script> 
    function calc() { 
     var k = document.getElementById("k"); 
     document.getElementById("b").innerHTML = k.value; 
    } 
</script> 
<p id="b"></p> 

, 적절하게 sepparate HTML에서 자바 스크립트 이벤트 함수를 정의하는 것이 좋습니다 js. 당신은 Element.addEventListener() 기능을 사용하여 해당 작업을 수행 할 수 있습니다, 여기에 코드는 지금이 도움이

<form id="form">A: 
    <input id="k" name="k" step=".1" type="number" value="20" width="5" /> 
</form> 

<button id="calcButton"> calculate </button> 

<script> 
    window.addEventListener("load", function() { 
     var btn = document.getElementById("calcButton"); 
     btn.addEventListener("click", calc); 
    }); 

    function calc() { 
     var k = document.getElementById("k"); 
     document.getElementById("b").innerHTML = k.value; 
    } 
</script> 
<p id="b"></p> 

희망!