时间戳

首页 > 解决方案 > 未捕获的 SyntaxError：使用 js 添加 onmouseclick 属性时出现意外标识符

javascript - 未捕获的 SyntaxError：使用 js 添加 onmouseclick 属性时出现意外标识符

问题描述

我不确定错误在哪里。我正在学习 JavaScript，并且在控制台日志中不断收到此错误。请帮忙。下面是代码。当我添加时问题来了

element.setAttribute("onmouseover","showing("+this+","+x+")");"

在build()函数中。

当我从上面的行中删除它时，它可以工作。但我也想将其作为属性传递

我该如何解决这个问题？该错误一直显示在 HTML 元素中。

<!DOCTYPE html>
<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
 <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <style>

        button{
            background: lightblue;
            font-size: 2em;
            border-radius: 15px;
            margin-left:auto;
            margin-right: auto;
            display: block;
            margin-bottom: 20px;
        }

        .hidden{
            display: none;
        }
        #message1{
            font-size: 2em;
            font-weight: bolder;
            text-align :center;
            margin-bottom: 20px;
        }
        #message2{
            font-size: 2em;
            font-weight: bolder;
            text-align :center;
            margin-bottom: 20px;
        }

        button:hover{
            cursor: pointer;
        }

        .box{
            height: 200px;
            width: 200px;
            display: inline-flex;
            align-items : center;
            border: 1px solid black;
            margin: 5px;
            text-align: center;
            
        }

        #gameArea{
            text-align: center;
        }
    </style>

    <title>Document</title>

</head>

<body>

    <button id="starter" onclick="start()">Start Game</button>

    <div id="message1">press start game</div>

    <div id="message2">person's name will appear here.</div>

    <div id="gameArea"></div>
    <script>

        var people=["a","b","c","d","e","f","g","h","i"]
        var arr=people.slice();
        var key;

        function start(){
            build();
            shuffleArr();
            // console.log(arr);
            document.getElementById('starter').classList.add("hidden");
            messagePass1("Find and click the names as fast you can..!!");
        }

        function shuffleArr(){
            arr.sort(function(a,b){
                return 0.5-Math.random();
            });
        }

        function build(){
            var element;
            var pa;
            for(var x=0;x<people.length;x++){
                 element=document.createElement("div");
                 element.setAttribute("onmouseover","showing("+this+","+x+")");
                 pa=document.createElement("span");
                 pa.innerHTML="Hidden "+(x+1);
                 pa.style.fontSize="2em"
                 pa.style.marginRight="auto";
                 pa.style.marginLeft="auto";
                 element.appendChild(pa);
                 element.classList.add("box");
                 document.getElementById("gameArea").appendChild(element);
            }
        }

        function showing(thisHere,index){
            messagePass2(index+1);
        }

        function messagePass1(m){
            document.getElementById("message1").innerHTML=m;
        }

        function messagePass2(m){
            document.getElementById("message2").innerHTML=m;
        }
    </script>

</body>

</html>

标签： javascript

解决方案

改变

element.setAttribute("onmouseover","showing("+this+","+x+")");

到

element.onmouseover = function() {showing(this,x)};


var people=["adhi","ashwin","aditya","anurag","ashwath","athira","athul","abilash","deepak"]
var arr=people.slice();
var key;

function start(){
  build();
  shuffleArr();
  // console.log(arr);
  document.getElementById('starter').classList.add("hidden");
  messagePass1("Find and click the names as fast you can..!!");
}

function shuffleArr(){
  arr.sort(function(a,b){
    return 0.5-Math.random();
  });
}

function build(){
  var element;
  var pa;
  for(let x=0;x<people.length;x++){
     element=document.createElement("div");
     element.onmouseover = function() {showing(this,x)};
     pa=document.createElement("span");
     pa.innerHTML="Hidden "+(x+1);
     pa.style.fontSize="2em"
     pa.style.marginRight="auto";
     pa.style.marginLeft="auto";
     element.appendChild(pa);
     element.classList.add("box");
     document.getElementById("gameArea").appendChild(element);
  }
}

function showing(thisHere,index){
  messagePass2(index+1);
}

function messagePass1(m){
  document.getElementById("message1").innerHTML=m;
}

function messagePass2(m){
  document.getElementById("message2").innerHTML=m;
}
button{
    background: lightblue;
    font-size: 2em;
    border-radius: 15px;
    margin-left:auto;
    margin-right: auto;
    display: block;
    margin-bottom: 20px;
}

.hidden{
    display: none;
}
#message1{
    font-size: 2em;
    font-weight: bolder;
    text-align :center;
    margin-bottom: 20px;
}
#message2{
    font-size: 2em;
    font-weight: bolder;
    text-align :center;
    margin-bottom: 20px;
}

button:hover{
    cursor: pointer;
}

.box{
    height: 200px;
    width: 200px;
    display: inline-flex;
    align-items : center;
    border: 1px solid black;
    margin: 5px;
    text-align: center;

}

#gameArea{
    text-align: center;
}
<button id="starter" onclick="start()">Start Game</button>

<div id="message1">press start game</div>

<div id="message2">person's name will appear here.</div>

<div id="gameArea"></div>

推荐阅读