2016-11-10 3 views
0

"계산"버튼을 클릭하면 숫자를 제곱근까지만 입력 할 수 있지만 다른 한편으로는 상자 2에 숫자를 넣으려고하면 box1에 무엇이든 표시하십시오. ConvertToSqrt() 및 ConvertToNum()이 포함 된 다른 함수를 추가해야합니까?두 개의 함수를 실행할 수 없습니다

<script type="text/javascript"> 

    function ConvertToSqrt() 
{ 
    var num, sqrt; 
    num = parseFloat(document.getElementById('box1').value); 
    var sqrt = NumberToSquare(num); 
    box2.value=sqrt; 
} 

function ConvertToNum() 
{ 
    var sqrt, num; 
    sqrt = parseFloat(document.getElementById('box2').value); 
    num = SquareToNum(sqrt); 
    box1.value=num; 
} 

function NumberToSquare(num) 
{ 
    var sqrt; 
    sqrt = Math.sqrt(num); 
    return sqrt; 
} 

function SquareToNumber(sqrt) 
{ 
    var num; 
    num = Math.pow(sqrt,2); 
    return num; 
} 
    </script> 

<body> 
    <div style="border: solid; width: 300px; background-color: #83CAFF"> 

    <table> 
    <th></th> <th>Calculater</th> 
    <tr> 
    <th>Enter Number:</th><th><input type="text" id="box1"></th> 
    <tr> 
    <th>SquareRoot:</th><th><input type="text" id="box2"></th> 
    <tr> 
    <th></th><th><input type="button" value="Calculate" 
    onclick="ConvertToNum(); ConvertToSqrt();"> 
    </table> 
    </div> 
    </body> 
    </html> 
+0

[Unobtrusive JavaScript] (https://en.wikipedia.org/wiki/Unobtrusive_JavaScript)에 대한 내용을 제안 할 수 있습니까? – icecub

+0

콘솔에서 오류를 확인하십시오. 디버거를 사용하여 코드를 추적하십시오. –

답변

0

그래, 당신이 ConvertToSqrt()와 ConvertToNum()를 포함하는 다른 함수를 추가해야하고, 당신이 이상 유지할 때문에 바로 사용하여 HTML에서 이벤트를 결합하여 addEventListener 또는 안 JavaScript로 작업 할 다른 사람들

1

이것이 내가하는 방법이다. jquery를 사용하기를 원한다면 매우 쉽습니다.

UPDATE :

var box1 = document.getElementById("box1"); 
 
var box2 = document.getElementById("box2"); 
 
var resetButton = document.getElementById("reset"); 
 

 
resetButton.onclick = function(){ 
 
    box1.value = ""; 
 
    box2.value = ""; 
 
}; 
 

 
//--------------------------------------------- 
 

 
box1.onkeyup = function(){ 
 
    box2.value = ConvertToSqrt(box1.value); 
 
}; 
 

 
function ConvertToSqrt(num) 
 
{ 
 
    var sqrt = NumberToSquare(num); 
 
    return sqrt; 
 
} 
 

 
function NumberToSquare(num) 
 
{ 
 
    var sqrt = Math.sqrt(num); 
 
    return sqrt; 
 
} 
 

 
//--------------------------------------------- 
 

 
box2.onkeyup = function(){ 
 
    box1.value = ConvertToNum(box2.value); 
 
}; 
 

 
function ConvertToNum(sqrt) 
 
{ 
 
    var num = SquareToNumber(sqrt); 
 
    return num; 
 
} 
 

 
function SquareToNumber(sqrt) 
 
{ 
 
    var num = Math.pow(sqrt,2); 
 
    return num; 
 
}
<div style="border: solid; width: 300px; background-color: #83CAFF"> 
 

 
    <table> 
 
    <th></th> <th>Calculater</th> 
 
    <tr> 
 
    <th>Enter Number:</th><th><input type="text" id="box1"></th> 
 
    <tr> 
 
    <th>SquareRoot:</th><th><input type="text" id="box2"></th> 
 
    <tr> 
 
    <th></th><th><input id="reset" type="button" value="reset"> 
 
    </table> 
 
    </div> 
 
    </body>

아래 SquareToNumber 기능을 missspelt PLAIN JS로 변경되었습니다. SquareToNum입니까?

function ConvertToNum() { 
    var sqrt, num; 
    sqrt = parseFloat(document.getElementById('box2').value); 
    num = SquareToNumber(sqrt); 
    //num = SquareToNum(sqrt); 
    box1.value = num; 
} 
+0

해결 한 후에도 여전히 작동하지 않습니다. –

+0

jequry 사용법을 잘 모르겠습니다. HTML과 JavaScript 방식을 사용하는 방법이 있습니까? –

+0

확인을 위의 내용을 일반 Javascript로 변경했습니다. – Icewine