有人可以解釋為什么我的代碼無法正常工作嗎？

Question

目標是在3 * 3網格中創建9個按鈕，並將兩個單詞作為兩個輸出輸出。 我嘗試使用事件偵聽器方法，但似乎無法弄清為什么它不起作用。 有人可以給我一些指示嗎？ 使用警報不是正確的選擇。 我很確定我的職能出了問題。 單擊每個按鈕后，是否可以創建彈出的文本框？

<html>
<head>
    <title> Device Control</title>
</head>

<body> 
    <table>
    <tr>
        <th> <button id="myBtn1">Try it </button> </th>
        <th> <button id="myBtn2">Be Careful </button> </th>
        <th> <button id="myBtn3"> Look AHEAD </button> </th>
    </tr>
    <tr>
        <tH> <button id="myBtn4"> behind you</button> </th>
        <th> <button id="myBtn5"> AHHHHHA</button> </th>
        <th> <button id="myBtn6"> Bloooooddd</button> </th>
</tr>
    <tr>
        <th> <button id="myBtn7"> I am deeeaaaddddd </button> </th>
        <th>  <button id="myBtn8"> NOOOOOO </button> </th> 
        <th> <button id="myBtn9"> THE LIGHT</button> </th>
    <tr>
</table>

<script>

document.getElementById("myBtn1").addEventListener("click", myFunction1);

function myFunction1() {
  alert ("left"
    "up");
}


document.getElementById("myBtn2").addEventListener("click", myFunction22);

function myFunction2() {
    alert ("off"
        "up");
    }


document.getElementById("myBtn3").addEventListener("click", myFunction3);

function myFunction3() {
    alert ("right");
   }


   document.getElementById("myBtn4").addEventListener("click", myFunction4;

function myFunction4() {
  alert ("left"
        "off");
}

   document.getElementById("myBtn5").addEventListener("click", myFunction5);
function myFunction5() {
    alert ("off"
    "off");
}


   document.getElementById("myBtn6").addEventListener("click", myFunction6);
function myFunction6() {
   alert ("right"
    "off");
}

   document.getElementById("myBtn7").addEventListener("click", myFunction7);
function myFunction7() {
 alert ("left"
    "down");
}
   document.getElementById("myBtn8").addEventListener("click", myFunction8);
   function myFunction8() {
     alert ("off"
        "down");
}

    document.getElementById("myBtn9").addEventListener("click", myFunction9);
   function myFunction9() {
    alert ("right"
        "down");
}


</script>
</body>
</html>

Answer 1

您遇到“ myFunction22”錯誤。 如果打開開發工具控制台，您將看到

未捕獲的ReferenceError：未定義myFunction22

將其更改為“ myFunction2”，它將起作用。

另外，您還需要用“ plus”連接字符串：

alert ("left" +
    "off");

沒有它，你得到

參數列表后未捕獲到的SyntaxError：缺少）

結論：開始使用控制台（ Chrome ， FF ）調試代碼！

另外，您的代碼可以通過一千種方式進行重構，例如：

var messages = ["left-up", "off-up", "etc", "etc", "etc", "etc", "etc", "etc", "etc"];

for(var i = 0 ; i < 10; i++) {
  document.getElementById("myBtn" + (i + 1)).addEventListener("click", generateMyFunction(i));
}

function generateMyFunction(index) {
  return function() {
      alert(messages[index]);
    }
}

Answer 2

單擊每個按鈕后，是否可以創建彈出的文本框？ 是的。 出於基本目的，您可以使用hint（）方法，例如：

var employee = prompt("Name of employee");

並將值存儲在變量中以備將來使用。

你也應該這樣嘗試addEventListener（）

var btn = document.getElementById("myBtn2");
btn.addEventListener('click', myFunction22);

看起來更干凈。

Answer 3

由於以下原因，代碼無法正常工作

myFunction22未定義
這里沒有document.getElementById("myBtn4").addEventListener("click", myFunction4括號) document.getElementById("myBtn4").addEventListener("click", myFunction4
對於多行字符串，請使用+連接字符串或使用backtick（`）

 document.getElementById("myBtn1").addEventListener("click", myFunction1); function myFunction1() { alert("left up"); } //myFunction22 is not defined changed it to myFunction2 document.getElementById("myBtn2").addEventListener("click", myFunction2); function myFunction2() { alert("off up"); } document.getElementById("myBtn3").addEventListener("click", myFunction3); function myFunction3() { alert("right"); } //typo here no closing braces.Closing braces added document.getElementById("myBtn4").addEventListener("click", myFunction4); function myFunction4() { alert("left off"); } document.getElementById("myBtn5").addEventListener("click", myFunction5); function myFunction5() { alert("off off"); } document.getElementById("myBtn6").addEventListener("click", myFunction6); function myFunction6() { alert("right off"); } document.getElementById("myBtn7").addEventListener("click", myFunction7); function myFunction7() { alert("left down"); } document.getElementById("myBtn8").addEventListener("click", myFunction8); function myFunction8() { alert("off down"); } document.getElementById("myBtn9").addEventListener("click", myFunction9); // Used backtick (`) for multiline string function myFunction9() { alert(`right down`); }

 <table> <tr> <th> <button id="myBtn1">Try it </button> </th> <th> <button id="myBtn2">Be Careful </button> </th> <th> <button id="myBtn3"> Look AHEAD </button> </th> </tr> <tr> <tH> <button id="myBtn4"> behind you</button> </th> <th> <button id="myBtn5"> AHHHHHA</button> </th> <th> <button id="myBtn6"> Bloooooddd</button> </th> </tr> <tr> <th> <button id="myBtn7"> I am deeeaaaddddd </button> </th> <th> <button id="myBtn8"> NOOOOOO </button> </th> <th> <button id="myBtn9"> THE LIGHT</button> </th> <tr> </table>

Answer 4

檢查此更新的代碼段

因此，我建議您進行編輯，而不是將整個document.addEventListener寫入每個元素，您只需創建一個全局單擊偵聽器，然后使用切換用例來處理對不同id的不同按鈕單擊，這使程序簡單而干凈而不是編寫多個函數，您alert（“ off”“ down”）中的第三個是js中的js不正確，您無法使用此語法，可能的正確語法是alert（“ off”，“ down”）或alert（“ off down） “）或alert（” off“ +” down“）。您多次犯錯，請避免

<html>
<head>
    <title> Device Control</title>
</head>

<body> 
    <table>
    <tr>
        <th> <button id="myBtn1">Try it </button> </th>
        <th> <button id="myBtn2">Be Careful </button> </th>
        <th> <button id="myBtn3"> Look AHEAD </button> </th>
    </tr>
    <tr>
        <tH> <button id="myBtn4"> behind you</button> </th>
        <th> <button id="myBtn5"> AHHHHHA</button> </th>
        <th> <button id="myBtn6"> Bloooooddd</button> </th>
</tr>
    <tr>
        <th> <button id="myBtn7"> I am deeeaaaddddd </button> </th>
        <th>  <button id="myBtn8"> NOOOOOO </button> </th> 
        <th> <button id="myBtn9"> THE LIGHT</button> </th>
    <tr>
</table>

<script>

 document.addEventListener('click', function(e) {
        console.log(e.target.id)
        if (e.target) { //do something
            clickFunctions(e.target.id)
        }
    })

function clickFunctions(key){
  switch(key){
    case 'myBtn1':
     alert ("left up");
    break;
    case 'myBtn2':
    alert ("off up"); 
    break;
    case 'myBtn3':
    alert ("right");
    break;
    case 'myBtn4':
     alert ("off off");
    break;
    case 'myBtn5':
     alert ("right off");
    break;
    case 'myBtn6':
    alert ("left down");
    break;
    case 'myBtn7':
    alert ("left down");
    break;
    case 'myBtn8':
    alert ("off down");
    break;
    case 'myBtn9':
    alert ("right down");
    break;
    default:
    console.log('no action');
  }
  return ;
}

// document.getElementById("myBtn1").addEventListener("click", myFunction1);

// function myFunction1() {
//   alert ("left"
//     "up");
// }


// document.getElementById("myBtn2").addEventListener("click", myFunction22);

// function myFunction2() {
//     alert ("off"
//         "up");
//     }


// document.getElementById("myBtn3").addEventListener("click", myFunction3);

// function myFunction3() {
//     alert ("right");
//    }


//    document.getElementById("myBtn4").addEventListener("click", myFunction4;

// function myFunction4() {
//   alert ("left"
//         "off");
// }

//    document.getElementById("myBtn5").addEventListener("click", myFunction5);
// function myFunction5() {
//     alert ("off"
//     "off");
// }


//    document.getElementById("myBtn6").addEventListener("click", myFunction6);
// function myFunction6() {
//    alert ("right"
//     "off");
// }

//    document.getElementById("myBtn7").addEventListener("click", myFunction7);
// function myFunction7() {
//  alert ("left"
//     "down");
// }
//    document.getElementById("myBtn8").addEventListener("click", myFunction8);
//    function myFunction8() {
//      alert ("off"
//         "down");
// }

//     document.getElementById("myBtn9").addEventListener("click", myFunction9);
//    function myFunction9() {
//     alert ("right"
//         "down");
// }


    </script>
    </body>
    </html>

Answer 5

注意： Internet Explorer 8和更早版本不支持addEventListener（）方法。 因此，我給您另一種解決方案以供參考。

以下是沒有按鈕ID的情況下的示例代碼。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Device Control</TITLE>
</HEAD>
<BODY>
    <TABLE>
        <TBODY>
            <TR>
                <TH><BUTTON onclick=myFunction1()>Try it</BUTTON> </TH>
                <TH><BUTTON onclick=myFunction2()>Be Careful</BUTTON> </TH>
                <TH><BUTTON onclick=myFunction3()>Look AHEAD</BUTTON> </TH>
            </TR>
            <TR>
                <TH><BUTTON onclick=myFunction4()>behind you</BUTTON> </TH>
                <TH><BUTTON onclick=myFunction5()>AHHHHHA</BUTTON> </TH>
                <TH><BUTTON onclick=myFunction6()>Bloooooddd</BUTTON> </TH>
            </TR>
            <TR>
                <TH><BUTTON onclick=myFunction7()>I am deeeaaaddddd</BUTTON> </TH>
                <TH><BUTTON onclick=myFunction8()>NOOOOOO</BUTTON> </TH>
                <TH><BUTTON onclick=myFunction9()>THE LIGHT</BUTTON> </TH>
           </TR>
        </TBODY>
    </TABLE>
    <SCRIPT>
        function myFunction1() {alert("left up");}
        function myFunction2() {alert("off up");}
        function myFunction3() {alert("right");}
        function myFunction4() {alert("left off");}
        function myFunction5() {alert("off off");}
        function myFunction6() {alert("right off");}
        function myFunction7() {alert("left down");}
        function myFunction8() {alert("off down");}
        function myFunction9() {alert("right down");}
    </SCRIPT>
</BODY>
</HTML>

如果您確實需要某種方式的按鈕ID，請參考此內容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
</HEAD>
<BODY>
    <TABLE>
        <TBODY>
            <TR>
                <TH><BUTTON id=myBtn1>Try it</BUTTON> </TH>
                <TH><BUTTON id=myBtn2>Be Careful</BUTTON> </TH>
                <TH><BUTTON id=myBtn3>Look AHEAD</BUTTON> </TH>
            </TR>
            <TR>
                <TH><BUTTON id=myBtn4>behind you</BUTTON> </TH>
                <TH><BUTTON id=myBtn5>AHHHHHA</BUTTON> </TH>
                <TH><BUTTON id=myBtn6>Bloooooddd</BUTTON> </TH>
            </TR>
            <TR>
                <TH><BUTTON id=myBtn7>I am deeeaaaddddd</BUTTON> </TH>
                <TH><BUTTON id=myBtn8>NOOOOOO</BUTTON> </TH>
                <TH><BUTTON id=myBtn9>THE LIGHT</BUTTON> </TH>
            </TR>
        </TBODY>
    </TABLE>
    <SCRIPT type=text/javascript>
        document.getElementById("myBtn1").onclick = function myFunction1() { alert("left up"); }
        document.getElementById("myBtn2").onclick = function myFunction2() { alert("off up"); }
        document.getElementById("myBtn3").onclick = function myFunction3() { alert("right"); }
        document.getElementById("myBtn4").onclick = function myFunction4() { alert("left off"); }
        document.getElementById("myBtn5").onclick = function myFunction5() { alert("off off"); }
        document.getElementById("myBtn6").onclick = function myFunction6() { alert("right off"); }
        document.getElementById("myBtn7").onclick = function myFunction7() { alert("left down"); }
        document.getElementById("myBtn8").onclick = function myFunction8() { alert("off down"); }
        document.getElementById("myBtn9").onclick = function myFunction9() { alert("right down"); }
    </SCRIPT>
</BODY>
</HTML>

有人可以解釋為什么我的代碼無法正常工作嗎？

問題描述

5 個解決方案

解決方案1
0 2017-11-12 02:26:19

解決方案2
0 2017-11-12 02:33:31

解決方案3
0 2017-11-12 02:33:46

解決方案4
0 2017-11-12 02:40:57

解決方案5
0 2017-11-12 03:49:19

有人可以解釋為什么我的代碼無法正常工作嗎？

問題描述

5 個解決方案

解決方案1 0 2017-11-12 02:26:19

解決方案2 0 2017-11-12 02:33:31

解決方案3 0 2017-11-12 02:33:46

解決方案4 0 2017-11-12 02:40:57

解決方案5 0 2017-11-12 03:49:19

解決方案1
0 2017-11-12 02:26:19

解決方案2
0 2017-11-12 02:33:31

解決方案3
0 2017-11-12 02:33:46

解決方案4
0 2017-11-12 02:40:57

解決方案5
0 2017-11-12 03:49:19