Function 未在單擊按鈕時執行
[英]Function not executing on button click
問題描述
我又遇到了 Javascript 的麻煩。 我正在制作一個腳本，根據三角形的邊長計算三角形的類型、周長和面積，但是我編寫的腳本在單擊插入按鈕時不會觸發。
<head>
<script type="text/javascript">
document.getElementById("add").addEventListener("click", triangleCheck);
function triangleCheck(){
var A = document.getElementById("a").value;
var B = document.getElementById("b").value;
var C = document.getElementById("c").value;
var valido = function(){
if((A < B+C) && (B < A+C) && (C < A+B)){
return true;
}else{
return false;
}
};
this.v=valido();
this.perimetro = function(){
if(valido() == true){
return A+B+C;
}else{
return "triangolo non valido";
}
};
var s = this.perimetro()/2;
this.area = function(){
if(valido() == true){
return Math.sqrt(s*(s−A)*(s−B)*(s−C));
}else{
return "triangolo non valido";
}
};
this.tipo = function(){
if(valido() == true){
if(A == B && B == C && C == A){
return equilatero;
}else if(A == B || B == C || C == A){
return isoscele;
}else{
return scaleno;
}
}else{
return "triangolo non valido";
}
};
document.getElementById("periTri").innerHTML = this.perimetro;
document.getElementById("areaTri").innerHTML = this.area;
document.getElementById("tipoTri").innerHTML = this.tipo;
}
</script>
</head>
<body>
<h3>Inserisci i tre lati del triangolo:</h3><br>
<form id="lati">
<label for="a">A</label>
<input type="text" id="a" name="a"><br>
<label for="b">B</label>
<input type="text" id="b" name="b"><br>
<label for="c">C</label>
<input type="text" id="c" name="c"><br>
<br>
<button type="button" id="add" name="add" value="Inserisci"></button>
</form>
<ul id="periTri"></ul>
<ul id="areaTri"></ul>
<ul id="tipoTri"></ul>
</body>
</html>
我不知道該怎么做，我已經嘗試了所有我能找到的東西——包括我之前遇到的 JS 問題的正確答案——但沒有任何效果。 事實上，即使在做了很多 JS 練習之后，這也是一個一直困擾着我的問題。
3 個解決方案
解決方案1
3 2020-07-14 13:44:31
編碼中的問題：
腳本標簽在正文標簽之前。
不將從輸入獲取的字符串值轉換為數字
工作代碼在這里
document.getElementById("add").addEventListener("click", triangleCheck); function triangleCheck() { // input values are always string, cast them to numbers var A = Number(document.getElementById("a").value); var B = Number(document.getElementById("b").value); var C = Number(document.getElementById("c").value); var valido = function() { // if you don't cast string to number, below condition won't work if (A < B + C && B < A + C && C < A + B) { return true; } else { return false; } }; this.v = valido(); this.perimetro = function() { if (valido() == true) { return A + B + C; } else { return "triangolo non valido"; } }; var s = this.perimetro() / 2; this.area = function() { if (valido() == true) { return Math.sqrt(s * (s - A) * (s - B) * (s - C)); } else { return "triangolo non valido"; } }; this.tipo = function() { if (valido() == true) { if (A == B && B == C && C == A) { return "equilatero"; } else if (A == B || B == C || C == A) { return "isoscele"; } else { return "scaleno"; } } else { return "triangolo non valido"; } }; document.getElementById("periTri").innerHTML = this.perimetro(); document.getElementById("areaTri").innerHTML = this.area(); document.getElementById("tipoTri").innerHTML = this.tipo(); }
<html> <body> <h3>Inserisci i tre lati del triangolo:</h3><br> <form id="lati"> <label for="a">A</label> <input type="text" id="a" name="a"><br> <label for="b">B</label> <input type="text" id="b" name="b"><br> <label for="c">C</label> <input type="text" id="c" name="c"><br> <br> <button type="button" id="add" name="add" value="Inserisci">Inserisci</button> </form> <ul id="periTri"></ul> <ul id="areaTri"></ul> <ul id="tipoTri"></ul> </body> <!-- Move your script tag here !!! --> </html>
解決方案2
1 2020-07-14 13:37:23
這是因為腳本在文檔加載之前執行。
嘗試這個：
<head>
<script type="text/javascript">
function onload() {
document
.getElementById('add')
.addEventListener('click', triangleCheck);
function triangleCheck() {
// your logic here
console.log('check');
}
}
document.addEventListener('DOMContentLoaded', onload);
</script>
</head>
<body>
<!-- your content here -->
</body>
https://developer.mozilla.org/en-US/docs/Web/API/Window/DOMContentLoaded_event
解決方案3
1 2020-07-14 13:46:59
您只需要在創建所有 DOM 元素后執行腳本。 因為當你查詢一個 DOM 元素時，瀏覽器找不到它，因為它還沒有創建。
要解決此問題，請在關閉</body>標記之前放置<script> 。 或者將onclick屬性添加到<button> 。
檢查工作代碼：
<body> <h3>Inserisci i tre lati del triangolo:</h3><br> <form id="lati"> <label for="a">A</label> <input type="text" id="a" name="a"><br> <label for="b">B</label> <input type="text" id="b" name="b"><br> <label for="c">C</label> <input type="text" id="c" name="c"><br> <br> <button type="button" id="add" name="add" value="Inserisci"></button> </form> <ul id="periTri"></ul> <ul id="areaTri"></ul> <ul id="tipoTri"></ul> <script type="text/javascript"> document.getElementById("add").addEventListener("click", triangleCheck); function triangleCheck() { var A = document.getElementById("a").value; var B = document.getElementById("b").value; var C = document.getElementById("c").value; var valido = function() { if ((A < B + C) && (B < A + C) && (C < A + B)) { return true; } else { return false; } }; this.v = valido(); this.perimetro = function() { if (valido() == true) { return A + B + C; } else { return "triangolo non valido"; } }; var s = this.perimetro() / 2; this.area = function() { if (valido() == true) { return Math.sqrt(s * (s - A) * (s - B) * (s - C)); } else { return "triangolo non valido"; } }; this.tipo = function() { if (valido() == true) { if (A == B && B == C && C == A) { return 'equilatero'; } else if (A == B || B == C || C == A) { return 'isoscele'; } else { return 'scaleno'; } } else { return "triangolo non valido"; } }; document.getElementById("periTri").innerHTML = this.perimetro(); document.getElementById("areaTri").innerHTML = this.area(); document.getElementById("tipoTri").innerHTML = this.tipo(); } </script> </body>
我還修復了一些主要問題。 例如，您將 function 設置為 innerHTML 而不是 function 結果。 要獲得 function 結果，您需要使用()調用它。 而已。 該代碼現在正在運行。
Function 作為默認行為自動執行內部按鈕單擊
[英]Function is executing inside button click automatically as default behavior
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.