Drucken von Bildern aus JavaScript

Ich versuche, zwei Bilder 24 Mal in einem Weihnachtskalender zu drucken. Die Bilder, die ich zu drucken versuche, sind innhold.gif und luke.jpg. Wenn Sie auf luke.gif klicken, soll es in innhold.gif geändert werden. Das wird in Sirkel-Div passieren. Aber es ist nur weiß. Ich kann nicht herausfinden, was falsch ist, entweder von mir selbst oder in Google Chrome überprüfen.Drucken von Bildern aus JavaScript

Meine Frage ist, wie kann ich diesen Code ändern, wenn die Leute auf luke.jpg klicken, ändert sich das in innhold.gif?

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 


<title>Westerdals julekalender 2017 - Din julekalender</title> 

    </head> 
    <body> 

    <!--Header--> 
    <header> 
     <h1>Westerdals julekalender 2017</h1> 
    </header> 

    <!--Meny--> 
    <nav> 
     <ul> 
      <li><a href="julekalender_side1.html">Forsiden</a></li> 
      <li><a href="julekalender_side2.html">Din julekalender</a></li> 
     </ul> 
    </nav> 

    <!--Content from cookie-->   
     <section> 
      <p id="cookie-innhold">Her kommer cookie-innhold</p> 
     </section> 

    <!--Kalenderen--> 
    <div id="kalender-div"> 

     <p id="peker-info"></p> 

    </div> 

    <div id="luke-div"></div> 

    <script> 
    (function(){ 

    //Array 
    let tekstArray = document.cookie.split("="); 
    let tekst = tekstArray[1]; 

    let SirkelDiv = document.getElementById("sirkel-div"); 

    let body = document.getElementsByTagName("body")[0]; 
    let html = document.documentElement; 

    document.getElementById("cookie-innhold").innerHTML = " " + tekst; 



    //Style av kalender 
    for(let i = 0; i < 24; i++){ 
     let nySirkel = document.createElement("div"); 
     nySirkel.style.cssText = "width: 300px; height: 300px; backround-image: url('images/innhold.gif');"; 
     nySirkel.style.cssText += "border: 2px solid black; opacity: 0.7;"; 
     nySirkel.style.cssText += "border-radius: 50%; float: left; margin:  5px;"; 

     nySirkel.innerHTML = (i + 1); 

     nySirkel.onclick = openLuke; 

     body.appendChild(nySirkel); 
    } 

    function openLuke(){ 
     this.style.backgroundImage = "url('images/luke.jpg');"; 
    } 


    }());//End function 
    </script> 

    </body> 
    </html>

Quelle

2017-11-23 Henrik Hanssen

Typo: Hintergrund-Bild sollte Hintergrund-Bild sein –

Neben dem Typo Sie in der cssText Zuordnung haben, versuchen Sie

"url('images/luke.jpg');"

; als Teil der backgroundImage Eigenschaft eines ungültigen CSS-Eigenschaft Wert zu setzen, sind nicht gültig entfernen. Der Browser weist den Wert nicht zu, da er ungültig ist.

(function() { 
 
    let body = document.body; 
 

 
    //Style av kalender 
 
    for (let i = 0; i < 24; i++) { 
 
    let nySirkel = document.createElement("div"); 
 
    nySirkel.style.cssText = "width: 300px; height: 300px; background-image: url('http://lorempixel.com/output/technics-q-c-640-480-1.jpg');"; 
 
    nySirkel.style.cssText += "border: 2px solid black; opacity: 0.7;"; 
 
    nySirkel.style.cssText += "border-radius: 50%; float: left; margin:  5px;"; 
 

 
    nySirkel.innerHTML = (i + 1); 
 

 
    nySirkel.onclick = openLuke; 
 

 
    body.appendChild(nySirkel); 
 
    } 
 

 
    function openLuke() { 
 
    this.style.backgroundImage = "url('http://lorempixel.com/output/people-q-c-640-480-1.jpg')"; 
 
    } 
 
}()); //End function

<header> 
 
    <h1>Westerdals julekalender 2017</h1> 
 
</header> 
 

 
<!--Meny--> 
 
<nav> 
 
    <ul> 
 
    <li><a href="julekalender_side1.html">Forsiden</a></li> 
 
    <li><a href="julekalender_side2.html">Din julekalender</a></li> 
 
    </ul> 
 
</nav> 
 

 
<!--Content from cookie--> 
 
<section> 
 
    <p id="cookie-innhold">Her kommer cookie-innhold</p> 
 
</section> 
 

 
<!--Kalenderen--> 
 
<div id="kalender-div"> 
 

 
    <p id="peker-info"></p> 
 

 
</div> 
 

 
<div id="luke-div"></div>

Quelle

2017-11-23 20:07:24

Drucken von Bildern aus JavaScript

Antwort

Verwandte Themen