堆棧內存溢出
  簡體   English   中英

單擊按鈕時來自 html 的隨機圖像

[英]Random image from html on button click

 原文  2020-09-05 18:06:46  0   5    javascript/ html/ arrays/ random/ mathjs

問題描述

我正在嘗試制作一個腳本，該腳本將從一個 div 元素中獲取圖像並在單擊按鈕時將其隨機放入 div rndmImage，我應該在加載文檔時看到圖像，但是單擊后圖像應該去的新 div 必須為空，直到點擊堆積。 而且我只需要 JavaScript，不需要 jQuery，而且我無法更改 html，而且它必須適用於任意數量的圖像。 所以如果你有一些想法會很棒。 這是我的代碼。 

 window.addEventListener('load', start, false); function start() { var butt = document.getElementsByTagName('button')[0]; var rnImg = document.getElementsByClassName('ekran'); var pictures = document.getElementsByTagName('img'); var choose = Math.floor(Math.random()*pictures.length); butt.addEventListener('click', menjaj, false); function menjaj(e) { var new = e.button; var img = []; for(var i = 0; i< pictures.length; i++) { var dodaj = img[i]; img.push(dodaj); } //ekran.src = 'slike/' + slike[izbor] + '.jpg'; } }
 <body> <div class="wrapper"> <div> <img src="slike/leto1.jpg" alt="leto1"> <img src="slike/leto2.jpg" alt="leto2"> <img src="slike/leto3.jpg" alt="leto3"> <img src="slike/leto4.jpg" alt="leto4"> <img src="slike/leto5.jpg" alt="leto5"> <img src="slike/leto6.jpg" alt="leto6"> <img src="slike/leto7.jpg" alt="leto7"> <img src="slike/leto8.jpg" alt="leto8"> <img src="slike/leto9.jpg" alt="leto9"> </div> <div> <button type="button">choose</button> </div> <div class="rndmImage"></div> </div> </body>

5 個解決方案

解決方案1
 0  2020-09-05 18:54:33

歡迎來到 StackOverflow！

我會首先隱藏.wrapper > div img因為這將阻止圖像顯示，然后附加一個data-pos以幫助選擇位置並簡單地隨機化它們並選擇src以顯示在占位符上

請記住，您有一個<div>作為占位符，因此您不能分配src ，只有將其更改為<img>

所以，像這樣😊 

 function chooseImg() { // get total images available var totalImages = document.querySelectorAll('.wrapper > div img').length log('totalImages', totalImages) // get a random position var rndPosition = Math.floor(Math.random() * totalImages) log('rndPosition', rndPosition) // get hold of the image for such position var rndImage = document.querySelector('.wrapper > div img[data-pos="' + rndPosition + '"]') log('rndImage', rndImage) // assign the source to the DIV document.querySelector('.rndmImage').style = 'background-image: url("' + rndImage.src + '")' } function log(txt, obj) { console.log(txt, obj) }
 .wrapper > div img { display: none; } .rndmImage { background-size: contain; background-repeat: no-repeat; width: 100px; height: 100px; }
 <div class="wrapper"> <div> <img data-pos="0" src="https://randomwordgenerator.com/img/picture-generator/54e5d2434953a514f1dc8460962e33791c3ad6e04e507440742f7cd09645cc_640.jpg" alt="leto1"> <img data-pos="1" src="https://randomwordgenerator.com/img/picture-generator/54e2d1404a57a814f1dc8460962e33791c3ad6e04e5074417c2d78d19f44c4_640.jpg" alt="leto2"> <img data-pos="2" src="https://randomwordgenerator.com/img/picture-generator/57e2d5444851a414f1dc8460962e33791c3ad6e04e50744172287ad2914fc4_640.jpg" alt="leto3"> <img data-pos="3" src="https://randomwordgenerator.com/img/picture-generator/51e8d0444f56b10ff3d8992cc12c30771037dbf85254794e722c73d19245_640.jpg" alt="leto4"> <img data-pos="4" src="https://randomwordgenerator.com/img/picture-generator/53e4d2464a56a914f1dc8460962e33791c3ad6e04e507440722d7cd39345c1_640.jpg" alt="leto5"> <img data-pos="5" src="https://randomwordgenerator.com/img/picture-generator/57e9dc434b5ba414f1dc8460962e33791c3ad6e04e50744172297bd5934cc4_640.jpg" alt="leto6"> <img data-pos="6" src="https://randomwordgenerator.com/img/picture-generator/55e1dc4b4254ad14f1dc8460962e33791c3ad6e04e507440722d72d09249c7_640.jpg" alt="leto7"> <img data-pos="7" src="https://randomwordgenerator.com/img/picture-generator/57e9d4474e54a814f1dc8460962e33791c3ad6e04e50744172297cdd974cc0_640.jpg" alt="leto8"> <img data-pos="8" src="https://randomwordgenerator.com/img/picture-generator/53e6dc404951b10ff3d8992cc12c30771037dbf852547848702e7ed19348_640.jpg" alt="leto9"> </div> <div> <button type="button" onclick="chooseImg()">choose</button> </div> <div class="rndmImage"></div> </div>

解決方案2
 0 已采納  2020-09-05 19:05:00

這是您的代碼的工作片段：

window.addEventListener('load', start, false);

function start () {
    var butt = document.getElementsByTagName('button')[0];
    var rnImg = document.getElementsByClassName('rndmImage')[0]; //Change selector to existing class and select the first (the only) one
    var pictures = document.getElementsByTagName('img');

    butt.addEventListener('click', menjaj, false);

    function menjaj (e) {
        // var new = e.button;// 'new' is reserved word in JS, you can't use it as variable name
        // var btn = e.button;// but this line is useless
        var choose = Math.floor(Math.random() * pictures.length); //better move this line inside this function to get rundom image every button clicks

        var img = document.createElement('img'); //creates new img tag
        img.src = pictures[choose].src;
        rnImg.innerHTML = ''; //to delete previous image
        rnImg.appendChild(img);
        // var img = []; //useless lines of code

        // for(var i = 0; i< pictures.length; i++) {
        //     var dodaj = img[i];
        //     img.push(dodaj);
        // }

        //ekran.src = 'slike/' + slike[izbor] + '.jpg';
    }
}

解決方案3
 0  2020-09-05 19:17:34

<div class="wrapper">
  <img src="../Assets1/Image/1.svg" alt="" />
  <img src="../Assets1/Image/2.svg" alt="" />
  <img src="../Assets1/Image/3.svg" alt="" />
</div>
<button>Click</button>
<div class="randomImageContainer"></div>


const button = document.querySelector('button');
button.addEventListener('click', randomImage);
function randomImage() {
  const image = document.querySelectorAll('.wrapper > img');
  const randomImageContainer = document.querySelector('.randomImageContainer');
  let randomNumber = Math.floor(Math.random() * image.length);

  const img = document.createElement('img');
  img.src = image[randomNumber].src;
  randomImageContainer.appendChild(img);
}

解決方案4
 0  2020-09-06 03:09:13

你可以像這樣使用普通的 javascript 來做到這一點： 

 document.querySelector("button").addEventListener("click", () => { var imgElements = document.querySelectorAll(".wrapper img"); document.querySelector(".rndmImage").innerHTML = imgElements[Math.floor(Math.random() * imgElements.length)].outerHTML; });
 <div class="wrapper"> <div> <img src="slike/leto1.jpg" alt="leto1"> <img src="slike/leto2.jpg" alt="leto2"> <img src="slike/leto3.jpg" alt="leto3"> <img src="slike/leto4.jpg" alt="leto4"> <img src="slike/leto5.jpg" alt="leto5"> <img src="slike/leto6.jpg" alt="leto6"> <img src="slike/leto7.jpg" alt="leto7"> <img src="slike/leto8.jpg" alt="leto8"> <img src="slike/leto9.jpg" alt="leto9"> </div> <div> <button type="button">choose</button> </div> <div class="rndmImage"></div> </div>

如果您能夠使用randojs ，您甚至可以簡化隨機性並使其全部加密安全，如下所示： 

 document.querySelector("button").addEventListener("click", () => document.querySelector(".rndmImage").innerHTML = rando(document.querySelectorAll(".wrapper img")).value.outerHTML);
 <script src="https://randojs.com/2.0.0.js"></script> <div class="wrapper"> <div> <img src="slike/leto1.jpg" alt="leto1"> <img src="slike/leto2.jpg" alt="leto2"> <img src="slike/leto3.jpg" alt="leto3"> <img src="slike/leto4.jpg" alt="leto4"> <img src="slike/leto5.jpg" alt="leto5"> <img src="slike/leto6.jpg" alt="leto6"> <img src="slike/leto7.jpg" alt="leto7"> <img src="slike/leto8.jpg" alt="leto8"> <img src="slike/leto9.jpg" alt="leto9"> </div> <div> <button type="button">choose</button> </div> <div class="rndmImage"></div> </div>

解決方案5
 0  2021-12-31 09:13:47

試試這個：這是我在 HTML 文件中的圖像

<snap id="image" class="btn btn-warning" onclick="changeImage()">Image</snap>
<image id="imagechange" src="https://picsum.photos/200/300" ></image>

我的 javascript 文件

imgcount = 0;
function changeImage() {
  document.getElementById("imagechange").src =
    "https://picsum.photos/200/" + (300 + imgcount);
  imgcount++;
}

每次單擊按鈕時都會獲得新圖像

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 來自按鈕單擊的隨機背景圖像 點擊按鈕的隨機圖像 單擊按鈕上的Javascript隨機圖像 使用 Javascript 單擊按鈕獲取隨機圖像 Javascript帶有單擊按鈕上的文本的隨機圖像 在 HTML 按鈕上插入圖像 如何從按鈕單擊下載HTML畫布圖形作為圖像 單擊初始按鈕時將HTML轉換為png圖像 單擊按鈕上的html2canvas下載生成的下載圖像 嘗試在按鈕單擊時播放隨機圖像和隨機聲音
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM