2016-10-29 6 views
-3

Ich machte eine zufällige Anzahl gen thingy, und ich machte es so, dass es das Bild im Hintergrund ändert. es kann 1 von 2 sein. sie ist der Code (1. CSS, dann htmlMein Javascript-Programm funktioniert nicht

/* Basic Styles */ 
 
body { 
 
    background-color: #FBFBFB; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: 'font', sans-serif; 
 
} 
 
@font-face { 
 
    font-family: font; src: url('font.ttf'); 
 
} 
 
/* Hero Styles */ 
 
#hero{ 
 
    text-align: center; 
 
    background: white; 
 
    margin: auto; 
 
    display: flex; 
 
    width: 100vw; 
 
    height: 65vh; 
 
    background-position: center -550px; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
#hero-title{ 
 
    font-size: 5em; 
 
    color: white; 
 
}
<!doctype html> 
 
<html> 
 
    <head> 
 
     <title> 
 
      Hello 
 
     </title> 
 
     <link rel="stylesheet" href="style.css" /> 
 
     <link rel='shortcut icon' href='images/favicon.ico' type='image/x-icon' /> 
 
     <meta charset="utf-8" /> 
 
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
 
     <meta name = "viewport" content = "width = device-width"> 
 
     <script type="text/javascript"> 
 
      var hero=Math.random() 
 
      hero = (hero * 2) 
 
      hero = Math.floor(hero) + 1 
 

 
      console.log("Hero is number " + hero + " of 2.") 
 
      if (hero == 1) { 
 
       document.getElementById("hero").innerHTML.style.background-image="images/hero1.png" 
 
      } 
 
     </script> 
 
    </head> 
 
    <body> 
 
     <div id="hero"> 
 
      <div id="hero-title"> 
 
       awesome websogte 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>
so yah, ich muss wissen, wie DA Helden Bildhintergrund zu ändern. (in der, wenn sstatement)

+0

Warum haben Sie eine verschachtelte if-Anweisung, die die gleiche Sache wie die innere fragt? –

+0

oops, vermasselt da, doesnt wirklich interfer tho –

+0

ich reparierte es jetzt. –

Antwort

2

Es gibt drei Fehler in der Leitung . Code, der das Hintergrundbild setzen angenommen hat, Fix, dass und es wird funktionieren

1:.. Set 'element.style' anstelle von 'element.innerHTML.style'

2: Change ‚background-image " zu "backgroundImage". (w3schools)

3: Wickeln Sie den Bildlink in 'url()'.

Alt:document.getElementById("hero").innerHTML.style.background-image="images/hero1.png"

Neu:document.getElementById("hero").style.backgroundImage="url(images/hero1.png)";

+0

ok, jetzt heißt es kann Eigenschaft "style" von null nicht lesen –

+0

Das liegt daran, dass das Javascript ausgeführt wird, bevor das DOM geladen wird. Versuchen Sie es auszuführen, sobald das DOM oder die Seite geladen ist, oder platzieren Sie das Skript am unteren Rand der Seite. – Richard

+0

hier ist ein Screenshot https://imgur.com/a/RAFLu –