Erstellen Sie Schaltflächen mit dynamischen Hintergrundbildern

Ich erstelle Schaltflächen dynamisch mit JavaScript; Ich möchte, dass jede der Schaltflächen ihr eigenes Hintergrundbild hat. Wie kann ich das erreichen?Erstellen Sie Schaltflächen mit dynamischen Hintergrundbildern

Der Code, den ich bisher habe, ist:

<html> 

<body> 
    <script> 
     function buttonsCreate() { 
      for (var i = 0; i <= 10; ++i) { 
       var button = document.createElement("button"); 
       var Area = document.getElementById("Area"); 
       Area.appendChild(button); 
       button.setAttribute("onClick", "eventHandlerForButtons('" + i + "');"); 
      } 
     } 

     function eventHandlerForButtons(alertText) { 
      alert(alertText); 
     } 
    </script> 
    <button onClick="buttonsCreate();">Create Buttons</button> 
    <div id="Area"></div> 
</body> 

</html>

Quelle

2017-02-28 Joachim

'die Bilder in einem array' sind - dort die Bilder im Code kein Array ist - in der Tat, es gibt keine Anordnung an einem ;; - macht es schwer zu helfen, wenn Sie Dinge über Ihren Code sagen, die nicht genau sind –

Die Frage wurde einfacher zu lesen. Es erwähnt ursprünglich, dass es eine Reihe von Bildern irgendwo gibt, aber es zeigt das nicht wirklich, so dass es aufgenommen werden muss. –

Versuchen button.style.backgroundImage = "url(" + array[i] + ")"; in Ihrem for-Schleife. Ersetzen Sie array für Ihre eigene Array-Variable.

Starten Sie auch keine Variablennamen und Element-IDs mit einem Großbuchstaben, z. Area ->area.

Sie können var Area = document.getElementById("Area"); außerhalb der for-Schleife verschieben. Dies muss nicht 10 Mal aufgerufen werden.

Quelle

2017-02-28 08:16:49

button.style.backgroundImage – Joachim

funktioniert nicht. – Joachim

var listofImgUrl = ["https://homepages.cae.wisc.edu/~ece533/images/airplane.png", "https://homepages.cae.wisc.edu/~ece533/images/boat.png", 
 
"https://homepages.cae.wisc.edu/~ece533/images/pool.png", 
 
"https://homepages.cae.wisc.edu/~ece533/images/airplane.png", "https://homepages.cae.wisc.edu/~ece533/images/boat.png", 
 
"https://homepages.cae.wisc.edu/~ece533/images/pool.png", 
 
"https://homepages.cae.wisc.edu/~ece533/images/airplane.png", "https://homepages.cae.wisc.edu/~ece533/images/boat.png", 
 
"https://homepages.cae.wisc.edu/~ece533/images/pool.png", 
 
"https://homepages.cae.wisc.edu/~ece533/images/airplane.png"]; 
 

 
function buttonsCreate() { 
 
    for (var i = 0; i <= 10; ++i) { 
 
    var button = document.createElement("button"); 
 
    button.innerHTML = i; 
 
    button.style.background = "url(" + listofImgUrl[i] + ")"; 
 
    var Area = document.getElementById("Area"); 
 
    Area.appendChild(button); 
 
    button.setAttribute("onClick", "eventHandlerForButtons('" + i + "');"); 
 
    } 
 
} 
 

 
function eventHandlerForButtons(alertText) { 
 
    alert(alertText); 
 
}

<html> 
 

 
<body> 
 
    <script> 
 
    </script> 
 
    <button onClick="buttonsCreate();">Create Buttons</button> 
 
    <div id="Area"></div> 
 

 
</body> 
 

 
</html>

Quelle

2017-02-28 08:28:44 yugi

ich meine bescheidene Meinung nach, .map() die erste Methode, die Sie berücksichtigen soll, wenn Sie durch ein Array zu durchlaufen mögen. Dies ist ein perfekter Anwendungsfall:

<html> 
<body> 
<script> 

// array of however many urls you wouls like rendered. 
//This will determin the number of buttons created 
const imgArr = ['url1', 'url2', 'url3', 'url4', 'url5', 'url6', 'url7', 'url8', 'url9', 'url10'] 

function buttonsCreate() { 

    //iterates over each array element and use the element and index 
    imgArr.map((el, i) => { 
     const button = document.createElement("button"); 
     const area = document.getElementById("area"); 
     button.setAttribute("id", ["btn" + i]); 
     button.setAttribute("onClick", "eventHandlerForButtons('"+i+"');"); 
     button.style.background = el; 
     area.appendChild(button); 
    }); 
} 

function eventHandlerForButtons(alertText) { 
    alert(alertText); 

    //just to allow you to look at area innerHTML by clicking a created button 
    console.log(document.getElementById('area').innerHTML); 
} 
</script> 
<button onClick="buttonsCreate();">Create Buttons</button> 
<div id="area"></div> 

</body> 
</html>

Quelle

2017-02-28 09:18:22

button.style.backgroundImage funktioniert nicht. hier der Code mit dem Array

<html> 
<body> 
<script> 
function loadPics() 
    { 
     for (i = 0; i <= 10; i++) 
      { 
      imgArray[i] = new Image(); 
      imgArray[i].src = 'ImageVerkehr/verk' + (i) + '.jpg'; 
     } 
     } 


function buttonsCreate() { 

loadPics(); 
    for (var i = 0; i <= 10; ++i) { 
     var button = document.createElement("button"); 
     var area = document.getElementById("area"); 
     button.style.backgroundImage = "url(" + imgArray[i] + ")"; 
     area.appendChild(button); 
     button.setAttribute("onClick", "eventHandlerForButtons('"+i+"');"); 
    } 
} 

function eventHandlerForButtons(alertText) { 
    alert(alertText); 
} 
</script> 
<button onClick="buttonsCreate();">Create Buttons</button> 
<div id="area"></div> 

</body> 
</html>

Quelle

2017-02-28 13:53:56 Joachim

Erstellen Sie Schaltflächen mit dynamischen Hintergrundbildern

Antwort

Verwandte Themen