使用動態背景圖像創建按鈕

我使用JavaScript動態創建按鈕;我希望每個按鈕都有自己的背景圖像。我怎樣才能做到這一點？使用動態背景圖像創建按鈕

我到目前爲止的代碼是：

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

來源

2017-02-28 Joachim

'圖像在一個數組中' - 在你的代碼中沒有圖像數組 - - 事實上，沒有數組在一個;;; - 如果您說出關於您的代碼不準確的問題，很難提供幫助 –

使問題更易於閱讀。它最初提到在某處存在一組圖像，但它實際上並未顯示，因此需要包含這些圖像。 –

嘗試button.style.backgroundImage = "url(" + array[i] + ")";你在for循環中。替換你自己的數組變量array。

也不要使用大寫字母開始變量名稱和元素ID，例如， Area - >area。

您可以在for循環之外移動var Area = document.getElementById("Area");。這不需要被稱爲10次。

來源

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>

來源

2017-02-28 08:28:44 yugi

我愚見，.MAP（）應該是你考慮的，當你想通過數組迭代第一種方法。這是一個完美的用例：

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

來源

2017-02-28 09:18:22

button.style.backgroundImage不起作用。這裏的代碼與陣列

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

來源

2017-02-28 13:53:56 Joachim

使用動態背景圖像創建按鈕

回答

相關問題