不能運行兩個函數

當我嘗試點擊按鈕「計算」時，它只能從輸入數字到平方根，但另一方面，當我嘗試在我的box2中輸入數字時，它不會在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>

來源

2016-11-10 Winnie Chan

我可以建議閱讀[Unobtrusive JavaScript]（https://en.wikipedia.org/wiki/Unobtrusive_JavaScript）嗎？ – icecub

檢查控制檯是否有錯誤。使用調試器跟蹤代碼。 – 2016-11-10 02:02:16

是的，你應該增加一個功能，其中包括ConvertToSqrt（）和ConvertToNum（），因爲它是不可維護的，你不應該在HTML綁定事件，只是使用的addEventListener或其他人在JavaScript中做到這一點

來源

2016-11-10 01:51:20 zhangFe

這就是我該怎麼做的。如果你願意使用jquery，它非常容易。

UPDATE：更改爲純JS

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>

你missspelt下面SquareToNumber功能。是SquareToNum。

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

來源

2016-11-10 01:51:51 Icewine

即使我修好了，它仍然不起作用 –

我不知道如何使用jequry。有沒有辦法做HTML和JavaScript的方式？ –

好的，將上面的內容更改爲純Javascript。 – Icewine

不能運行兩個函數

回答

相關問題