有人可以解释为什么我的代码没有正常工作吗？

时间：2017-11-12 02:20:41

标签： javascript html

目标是在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>

5 个答案:

答案 0 :(得分：0)

你的错误与＃34; myFunction22＆＃34;。如果您打开Dev Tools控制台，则会看到

  

未捕获的ReferenceError：myFunction22未定义

将其更改为＆＃34; myFunction2＆＃34;它会起作用。

此外，您需要使用＆＃34; plus＆＃34;：

连接字符串 
alert ("left" +
    "off");

没有它你会得到

  参数列表

之后的

Uncaught SyntaxError：missing）

判决：开始使用控制台（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]);
    }
}

答案 1 :(得分：0)

是否可以创建单击每个按钮后弹出的文本框？是的。出于基本目的，您可以使用prompt（）方法。例如：

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

并将值存储在变量中以供将来使用。

此外，您应该以这种方式尝试addEventListener（）

var btn = document.getElementById("myBtn2");
btn.addEventListener('click', myFunction22);
它看起来更干净。

答案 2 :(得分：0)

由于以下原因，代码无效

  1. myFunction22未定义

  2. 此处没有结束括号) document.getElementById("myBtn4").addEventListener("click", myFunction4

  3. 对于多行字符串，使用+来连接字符串或使用反引号（`）

    4. ＆＃13;
    ＆＃13; 
    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`);
}
    ＆＃13; 
    <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>
    ＆＃13;
    ＆＃13;
    ＆＃13;

答案 3 :(得分：0)

检查此更新的代码段

所以我建议的编辑不是将整个document.addEventListener写入每个元素，你只需要创建一个全局点击监听器，然后使用switch case处理不同id上的不同按钮点击，这使得程序简单而干净而不是编写多个函数，第三个在警报中（＆＃34;关闭＆＃34;＆＃34;向下＆＃34;）是不正确的js js你不能使用这种语法可能正确的语法是警报（＆ ＃34; off＆＃34;，＆＃34; down＆＃34;）或提醒（＆＃34;关闭＆＃34;）或提醒（＆＃34;关闭＆＃34; +＆＃34;关闭＆＃34;你犯了多次错误，所以请避免错误

<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>

答案 4 :(得分：0)

注意： 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>
相关问题
最新问题