stackoom
  简体   繁体   中英

Can someone explain why my code isn't working correctly?

 原文  2017-11-12 02:20:41  8   5    javascript/ html

Question

The goal is to create 9 buttons in a 3*3 grid and output two words as two outputs. I tried to use event listener method but can not seem to figure out why it's not working. Could someone give me some pointers, please? Is using alert not the right choice. I am pretty sure my function is the problem. Is it possible to create to textboxes which pops up after I click each button? 

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

solution1
 0  2017-11-12 02:26:19

You have an error with "myFunction22". If you open Dev Tools Console, you'll see

Uncaught ReferenceError: myFunction22 is not defined

Change it to "myFunction2" and it will work.

Also you need to concat yor strings with "plus": 

alert ("left" +
    "off");

Without it you get

Uncaught SyntaxError: missing ) after argument list

Verdict : start using the Console ( Chrome , FF ) to debug your code!

Also, your code could be refactored in a thousand ways, for example: 

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]);
    }
}

solution2
 0  2017-11-12 02:33:31

Is it possible to create to textboxes which pops up after I click each button? yes it is. for a basic purpose you can use the prompt() method.For example: 

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

and stored values in a variable for a future use.

Also you should try the addEventListener() this way 

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

it looks cleaner.

solution3
 0  2017-11-12 02:33:46

The code is not working for the following reason

  1. myFunction22 is not defined

  2. There was no closing braces ) here document.getElementById("myBtn4").addEventListener("click", myFunction4

  3. For multiline string use + to concat the string or use 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>

solution4
 0  2017-11-12 02:40:57

Check this updated snippet

So the edits that i would suggest is instead of writing the whole document.addEventListener to each elements you can just make a one global click listener and then use a switch case to handle different button clicks on different id , that makes the program simple and clean rather than writing multiple functions , third in your alert("off""down") is incorrect js in js you can not use this syntax the possible correct syntax are alert("off","down") or alert("off down") or alert("off"+"down").You have made the mistake multiple time so please avoid that 

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

solution5
 0  2017-11-12 03:49:19

Note: The addEventListener() method is not supported in Internet Explorer 8 and earlier versions. Thus I give you another solution for reference.

Below is example code for your case without button 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>

If you really need your button id somehow please refer to this. 

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Hi can someone help explain why my code isn't working? Can someone explain my code why it works? Can someone explain to me why this isn't working? Ajax Load + scripts on html Can someone explain why my modal isn't working. I think it has to do with my populateEpisodes function because the getEpisodes array is returned fine Can someone explain the working of this code? Can someone explain why is this not working? Someone explain why this isn't filling in the square Can someone explain why my “fixed navigation on Scroll” is not working? Could someone explain why my functions are not working? Could someone explain why my javascript is not working?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM