Dropdown-Menü Hintergrundbild zu ändern, tut nichts

Question

Das ist meine erste Frage auf Stack-Überlauf (so leid, wenn ich etwas falsch machen)

Wie dem auch sei, ich versuche, ein Dropdown-Menü zu erstellen, die das Hintergrundbild ändert sich von Die Webseite. Bei der Auswahl der Optionen passiert jedoch nichts.

EDIT Meine Arbeits Code hierfür lautet:

function changeTheme() 
 
    { 
 
     var e = document.getElementById("bg"); 
 
     var strUser = e.options[e.selectedIndex].text; 
 
     if (strUser == "default") 
 
     { 
 
      document.body.style.backgroundImage = "url(Thresh_BG.png)"; 
 
     } 
 
     if (strUser == "darkstar") 
 
     { 
 
      document.body.style.backgroundImage = "url(dark star.png)"; 
 
     } 
 
    }

<div id="bg"> 
 
    <form> 
 
    <select name="bg" id="bg" onchange="changeTheme();"> 
 
     <option value="default">Default</option> 
 
     <option value="darkstar">Dark Star Thresh</option> 
 
    </select> 
 
    </form> 
 
</div> 
 

 

Answer 1

Erstens i Ihre Variable mit einem außerhalb der Funktion erklären würde spezifischerer Name als "e". Außerdem sollten Sie innere [einzelne] Anführungszeichen zu Ihrem Bild hinzufügen.

Es ist immer eine gute Idee, den vollständigen Pfad einzuschließen, auch wenn es lokal auf Ihrem Server ist. Erleichtert das Erkennen eines Fehlers.Ich schließe einen jsbin witn meiner eigenen Bilder (sie auch im folgenden Code-Schnipsel verwendet werden)

this helps

Willkommen bei Stackoverflow!

var selecte = document.getElementById("bg"); 
 

 
function changeTheme() { 
 

 
    var strUser = selecte.options[selecte.selectedIndex]; 
 
    if (strUser.value == "default") { 
 
    document.body.style.backgroundImage = "url('http://www.rachelgallen.com/images/purpleflowers.jpg')"; 
 
    } 
 
    if (strUser.value == "darkstar") { 
 
    document.body.style.backgroundImage = "url('http://www.rachelgallen.com/images/yellowflowers.jpg')"; 
 
    } 
 
};

<form> 
 
    <select id="bg" onchange="changeTheme();"> 
 
    <option value="default">Default</option> 
 
    <option value="darkstar">Dark Star Thresh</option> 
 
    </select> 
 
</form>

Answer 2

Zuerst Sie id Kollision in Ihrem HTML haben. Sie können die ID Ihres div ändern, um etwas anderes als bg zu sein; Sagen wir bg1.

Dann müssen Sie den Wert einer Option zuzugreifen, anstatt den Text, so wird es sein:

var strUser = e.options[e.selectedIndex].value; 

Answer 3

für startes, ich bin mir ziemlich sicher, dass Sie mehr Zitate benötigen. Versuchen Sie es so Wechsel:

***Code*** 
if (strUser == "default") 
    { 
     document.body.style.backgroundImage = "url('Thresh_BG.png')"; 
    } 
    if (strUser == "darkstar") 
    { 
     document.body.style.backgroundImage = "url('dark star.png')"; 
    } 

Wenn Sie die URL so zu verwenden, müssen Sie sicherstellen, dass die Hintergrund-Bilder im selben Ordner wie die HTML sind. (Was ist schlechte Praxis?). Erstellen Sie besser einen "Inhalt" -Ordner und erstellen Sie dort einen "Bilder" -Ordner. Natürlich müssten Sie Ihre URLs an den neuen Speicherort Ihrer Bilder anpassen. (relativ natürlich).

Wenn ich Sie wäre, würde ich auch eine switch-Anweisung verwenden (wenn Sie Ihre Webseite aufrüsten möchten und mehr als zwei Optionen haben, wird es schwierig sein, mehrere if-Anweisungen zu setzen.

switch(strUser) 
    case "default": 
     document.body.style.backgroundImage = "url('Thresh_BG.png')"; 
     break; 
    case "darkstar": 
     document.body.style.backgroundImage = "url('dark star.png')"; 
     break; 
    ***more options here*** 
    default: break; 

bearbeiten ich sehe auch, Sie haben zwei ID ist die gleiche, die auch schlechte Praxis als Javascript nicht weiß, was man wählen. so können Sie das ändern möchten.

Noch ein kleiner Hinweis, sind Sie sicher, dass Sie den 'Text' Wert von benötigen die Auswahl? Vielleicht möchten Sie nach dem Wert anstelle des Textes fragen.

Answer 4

hier meine Arbeits Code überprüfen es

function changeTheme() { 
 
    console.log('work'); 
 
    var e = document.getElementById("bg").value; 
 
    if (e == "default") { 
 
    document.body.style.backgroundImage = "url(1.jpg)"; 
 
    } 
 
    if (e == "darkstar") { 
 
    document.body.style.backgroundImage = "url(2.jpg)"; 
 
    } 
 
}

<html> 
 

 
<body background="1.jpg"> 
 
    <div id="abc"> 
 

 
    </div> 
 

 
    <form> 
 
    <select name="bg" id="bg" onchange="changeTheme();"> 
 
    \t \t \t \t \t <option value="default">Default</option> 
 
    \t \t \t \t \t <option value="darkstar">Dark Star Thresh</option> 
 
    \t \t \t \t </select> 
 
    </form> 
 

 
</body> 
 

 
</html>

Answer 5

function changeTheme(e) 
{ 
    var e = document.getElementById("bg"); 
    var strUser = e.options[e.selectedIndex].value; 
    if (strUser == "default") 
    { 
    // document.body.style.backgroundImage = "url('img_tree.png')"; 
     document.body.style.backgroundImage = "url('http://kenrockwell.com/nikon/d5300/sample-images/DSC_0024.jpg')"; 
    } 
    else if (strUser == "darkstar") 
    { 
     document.body.style.backgroundImage = "url('https://www.w3schools.com/css/trolltunga.jpg')"; 
    } 
} 

Sie bitte die jsfiddle Verbindung überprüfen: https://jsfiddle.net/jayesh24/bdxLvvbo/