title: Exchanging a whole html document with addEventListener
body: <p>So i want, when the user clicks a div (#spillKnapp), the entire html document gets a new code. But right now all i get is "Uncaught SyntaxError: Invalid or unexpected token", i don't see why it wouldn't work, i assume i'm doing something wrong but i have no idea how to find out what i'm doing wrong.</p>
  
  <pre><code>document.getElementById('spillKnapp').addEventListener("onclick", function () {
    document.write('&lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;link href="https://fonts.googleapis.com/css?family=Alfa+Slab+One" rel="stylesheet"&gt; &lt;title&gt;&lt;/title&gt; &lt;style media="screen"&gt; 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%; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;img src="Img/home.png" id="homeKnapp"&gt; &lt;div class="outsideGame"&gt; &lt;div class="insideGame"&gt; &lt;div class="cpu"&gt; &lt;div class="buttonStein" id="cpuStein"&gt; &lt;div class="imgFrame"&gt; &lt;img src="Img/stein.png" id="steinCpu"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="buttonSaks" id="cpuSaks"&gt; &lt;div class="imgFrame"&gt; &lt;img src="Img/saks.png" id="saksCpu"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="buttonPapir" id="cpuPapir"&gt; &lt;div class="imgFrame"&gt; &lt;img src="Img/papir.png" id="papirCpu"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;p class="resultText1" id="winLogo"&gt;Seier!&lt;/p&gt; &lt;p class="resultText2" id="loseLogo"&gt;Tap!&lt;/p&gt; &lt;p class="resultText3" id="drawLogo"&gt;Uavgjort!&lt;/p&gt; &lt;div class="player"&gt; &lt;div class="button" id="steinButton"&gt; &lt;div class="imgFrame"&gt; &lt;img src="Img/stein.png" id="stein"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="button" id="saksButton"&gt; &lt;div class="imgFrame"&gt; &lt;img src="Img/saks.png" id="saks"&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="button" id="papirButton"&gt; &lt;div class="imgFrame"&gt; &lt;img src="Img/papir.png" id="papir"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;script type="text/javascript"&gt; 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 &amp;&amp; y == 2 || x == 2 &amp;&amp; y == 3 || x == 3 &amp;&amp; y == 1) { document.getElementById("winLogo").style.display = "block"; } else { document.getElementById("loseLogo").style.display = "block"; } } }&lt;/script&gt; &lt;/html&gt;')
  })
  </code></pre>
  
  <p>Note that this code is in a <code>.js</code> file linked to the document, not inline script in a <code>script</code> tag.</p>