所以我想，当用户单击div（#spillKnapp）时，整个html文档都会获得一个新代码。但是现在我得到的只是“未捕获的SyntaxError：无效或意外的令牌”，我不明白为什么它不起作用，我认为我做错了什么，但我不知道如何找出自己在做什么。做错了。
document.getElementById('spillKnapp').addEventListener("onclick", function () {
document.write('<html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One" rel="stylesheet"> <title></title> <style media="screen"> html, body { margin: 0px; padding: 0px; border: 0px; height: 100%; overflow-x: hidden; overflow-y: hidden; background-image: url(background.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; } .outsideGame { height: 80%; width: 80%; background-color: #ceceaa; margin: auto; margin-top: 5%; border: 1px solid black; } .insideGame { height: 90%; width: 95%; background-color: #546157; margin: auto; margin-top: 2.5%; display: solid; overflow: auto; } .cpu { height: 20%; width: 80%; margin-left: auto; margin-right: auto; margin-top: 2%; opacity: 0.3; pointer-events: none; } .player { height: 20%; width: 80%; margin-left: auto; margin-right: auto; margin-top: 25%; } .buttonStein { float: left; height: 70%; width: 15%; padding: 1%; margin-left: 12%; background-color: #ceceaa; border: 2px solid black; border-radius: 50px; filter: drop-shadow(5px -5px 5px black) } .buttonSaks { float: left; height: 70%; width: 15%; padding: 1%; margin-left: 12%; background-color: #ceceaa; border: 2px solid black; border-radius: 50px; filter: drop-shadow(5px -5px 5px black) } .buttonPapir { float: left; height: 70%; width: 15%; padding: 1%; margin-left: 12%; background-color: #ceceaa; border: 2px solid black; border-radius: 50px; filter: drop-shadow(5px -5px 5px black) } .button { float: left; height: 70%; width: 15%; padding: 1%; margin-left: 12%; background-color: #ceceaa; border: 2px solid black; border-radius: 50px; filter: drop-shadow(5px -5px 5px black) } .button:active { padding: 0.5%; margin: 1%; margin-left: 12%; filter: drop-shadow(0px 0px 2px black) } .imgFrame { height: 100%; width: 30%; margin-left: auto; margin-right: auto; } .resultText1 { position: absolute; font-family: Alfa Slab One; font-size: 600%; color: #ceceaa; filter: drop-shadow(0 0 10px black); margin-left: 30%; display: none; } .resultText2 { position: absolute; font-family: Alfa Slab One; font-size: 600%; color: #ceceaa; filter: drop-shadow(0 0 10px black); margin-left: 32%; display: none; } .resultText3 { position: absolute; font-family: Alfa Slab One; font-size: 600%; color: #ceceaa; filter: drop-shadow(0 0 10px black); margin-left: 26%; display: none; } #stein, #steinCpu { position: relative; height: 100%; width: 100%; } #saks, #saksCpu { position: relative; height: 100%; width: 100%; } #papir, #papirCpu { position: relative; height: 100%; width: 100%; } #homeKnapp { position: absolute; height: 15%; transform: rotate(0deg); opacity: 0.8; margin-top: 42%; margin-left: 1%; } #homeKnapp:hover { height: 16%; opacity: 1; } #homeKnapp:active { height: 15%; } </style> </head> <body> <img src="Img/home.png" id="homeKnapp"> <div class="outsideGame"> <div class="insideGame"> <div class="cpu"> <div class="buttonStein" id="cpuStein"> <div class="imgFrame"> <img src="Img/stein.png" id="steinCpu"> </div> </div> <div class="buttonSaks" id="cpuSaks"> <div class="imgFrame"> <img src="Img/saks.png" id="saksCpu"> </div> </div> <div class="buttonPapir" id="cpuPapir"> <div class="imgFrame"> <img src="Img/papir.png" id="papirCpu"> </div> </div> </div> <p class="resultText1" id="winLogo">Seier!</p> <p class="resultText2" id="loseLogo">Tap!</p> <p class="resultText3" id="drawLogo">Uavgjort!</p> <div class="player"> <div class="button" id="steinButton"> <div class="imgFrame"> <img src="Img/stein.png" id="stein"> </div> </div> <div class="button" id="saksButton"> <div class="imgFrame"> <img src="Img/saks.png" id="saks"> </div> </div> <div class="button" id="papirButton"> <div class="imgFrame"> <img src="Img/papir.png" id="papir"> </div> </div> </div> </div> </div> </body> <script type="text/javascript"> document.getElementById("steinButton").addEventListener("click", function(){ x = 1; game(); }) document.getElementById("saksButton").addEventListener("click", function(){ x = 2; game(); }) document.getElementById("papirButton").addEventListener("click", function(){ x = 3; game(); }) function game() { y = Math.floor(Math.random() * 3) + 1 document.getElementById("cpuStein").style.boxShadow = "none"; document.getElementById("cpuSaks").style.boxShadow = "none"; document.getElementById("cpuPapir").style.boxShadow = "none"; document.getElementById("winLogo").style.display = "none"; document.getElementById("loseLogo").style.display = "none"; document.getElementById("drawLogo").style.display = "none"; if (y == 1) { document.getElementById("cpuStein").style.boxShadow = "inset 0px 0px 0px 8px #fff"; } if (y == 2) { document.getElementById("cpuSaks").style.boxShadow = "inset 0px 0px 0px 8px #fff"; } if (y == 3) { document.getElementById("cpuPapir").style.boxShadow = "inset 0px 0px 0px 8px #fff"; } if (x == y) { document.getElementById("drawLogo").style.display = "block"; } else { if (x == 1 && y == 2 || x == 2 && y == 3 || x == 3 && y == 1) { document.getElementById("winLogo").style.display = "block"; } else { document.getElementById("loseLogo").style.display = "block"; } } }</script> </html>')
})
请注意，此代码位于链接到文档的.js文件中，而不是script标签中的内联脚本。
答案 0 :(得分：1)
addEventListener方法的第一个参数必须是"click"而不是"onclick"，因此：
document.getElementById('spillKnapp').addEventListener("click", function () {
document.write('<html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One" rel="stylesheet"> <title></title> <style media="screen"> html, body { margin: 0px; padding: 0px; border: 0px; height: 100%; overflow-x: hidden; overflow-y: hidden; background-image: url(background.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; } .outsideGame { height: 80%; width: 80%; background-color: #ceceaa; margin: auto; margin-top: 5%; border: 1px solid black; } .insideGame { height: 90%; width: 95%; background-color: #546157; margin: auto; margin-top: 2.5%; display: solid; overflow: auto; } .cpu { height: 20%; width: 80%; margin-left: auto; margin-right: auto; margin-top: 2%; opacity: 0.3; pointer-events: none; } .player { height: 20%; width: 80%; margin-left: auto; margin-right: auto; margin-top: 25%; } .buttonStein { float: left; height: 70%; width: 15%; padding: 1%; margin-left: 12%; background-color: #ceceaa; border: 2px solid black; border-radius: 50px; filter: drop-shadow(5px -5px 5px black) } .buttonSaks { float: left; height: 70%; width: 15%; padding: 1%; margin-left: 12%; background-color: #ceceaa; border: 2px solid black; border-radius: 50px; filter: drop-shadow(5px -5px 5px black) } .buttonPapir { float: left; height: 70%; width: 15%; padding: 1%; margin-left: 12%; background-color: #ceceaa; border: 2px solid black; border-radius: 50px; filter: drop-shadow(5px -5px 5px black) } .button { float: left; height: 70%; width: 15%; padding: 1%; margin-left: 12%; background-color: #ceceaa; border: 2px solid black; border-radius: 50px; filter: drop-shadow(5px -5px 5px black) } .button:active { padding: 0.5%; margin: 1%; margin-left: 12%; filter: drop-shadow(0px 0px 2px black) } .imgFrame { height: 100%; width: 30%; margin-left: auto; margin-right: auto; } .resultText1 { position: absolute; font-family: Alfa Slab One; font-size: 600%; color: #ceceaa; filter: drop-shadow(0 0 10px black); margin-left: 30%; display: none; } .resultText2 { position: absolute; font-family: Alfa Slab One; font-size: 600%; color: #ceceaa; filter: drop-shadow(0 0 10px black); margin-left: 32%; display: none; } .resultText3 { position: absolute; font-family: Alfa Slab One; font-size: 600%; color: #ceceaa; filter: drop-shadow(0 0 10px black); margin-left: 26%; display: none; } #stein, #steinCpu { position: relative; height: 100%; width: 100%; } #saks, #saksCpu { position: relative; height: 100%; width: 100%; } #papir, #papirCpu { position: relative; height: 100%; width: 100%; } #homeKnapp { position: absolute; height: 15%; transform: rotate(0deg); opacity: 0.8; margin-top: 42%; margin-left: 1%; } #homeKnapp:hover { height: 16%; opacity: 1; } #homeKnapp:active { height: 15%; } </style> </head> <body> <img src="Img/home.png" id="homeKnapp"> <div class="outsideGame"> <div class="insideGame"> <div class="cpu"> <div class="buttonStein" id="cpuStein"> <div class="imgFrame"> <img src="Img/stein.png" id="steinCpu"> </div> </div> <div class="buttonSaks" id="cpuSaks"> <div class="imgFrame"> <img src="Img/saks.png" id="saksCpu"> </div> </div> <div class="buttonPapir" id="cpuPapir"> <div class="imgFrame"> <img src="Img/papir.png" id="papirCpu"> </div> </div> </div> <p class="resultText1" id="winLogo">Seier!</p> <p class="resultText2" id="loseLogo">Tap!</p> <p class="resultText3" id="drawLogo">Uavgjort!</p> <div class="player"> <div class="button" id="steinButton"> <div class="imgFrame"> <img src="Img/stein.png" id="stein"> </div> </div> <div class="button" id="saksButton"> <div class="imgFrame"> <img src="Img/saks.png" id="saks"> </div> </div> <div class="button" id="papirButton"> <div class="imgFrame"> <img src="Img/papir.png" id="papir"> </div> </div> </div> </div> </div> </body> <script type="text/javascript"> document.getElementById("steinButton").addEventListener("click", function(){ x = 1; game(); }) document.getElementById("saksButton").addEventListener("click", function(){ x = 2; game(); }) document.getElementById("papirButton").addEventListener("click", function(){ x = 3; game(); }) function game() { y = Math.floor(Math.random() * 3) + 1 document.getElementById("cpuStein").style.boxShadow = "none"; document.getElementById("cpuSaks").style.boxShadow = "none"; document.getElementById("cpuPapir").style.boxShadow = "none"; document.getElementById("winLogo").style.display = "none"; document.getElementById("loseLogo").style.display = "none"; document.getElementById("drawLogo").style.display = "none"; if (y == 1) { document.getElementById("cpuStein").style.boxShadow = "inset 0px 0px 0px 8px #fff"; } if (y == 2) { document.getElementById("cpuSaks").style.boxShadow = "inset 0px 0px 0px 8px #fff"; } if (y == 3) { document.getElementById("cpuPapir").style.boxShadow = "inset 0px 0px 0px 8px #fff"; } if (x == y) { document.getElementById("drawLogo").style.display = "block"; } else { if (x == 1 && y == 2 || x == 2 && y == 3 || x == 3 && y == 1) { document.getElementById("winLogo").style.display = "block"; } else { document.getElementById("loseLogo").style.display = "block"; } } }</script> </html>')
})
答案 1 :(得分：0)
必须改变两件事
document.getElementById('spillKnapp').addEventListener("click", function () { // click instead of onclick
如果将代码放入文本编辑器，您将看到文档中不包含最后几个字符。
将结束脚本标记更改为
这里是有效解决方案的链接