Question

我试图在圣诞日历中打印两张照片24次。我试图打印的图片是innhold.gif和luke.jpg。当你点击luke.gif它应该改为innhold.gif。这将发生在sirkel-div中。但它只是白色的。我无法通过自己或Google Chrome中的检查发现错误。

我的问题是，如何更改此代码，以便当人们点击luke.jpg时，它会更改为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>

Answer 1

除了cssText赋值中的拼写错误，你试图设置一个无效的css属性值

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

;无效，因为backgroundImage属性的一部分将其删除。浏览器未分配该值，因为它无效。

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

从JavaScript打印图片

1 个答案: