使用 JavaScript 和 html 同时显示图像和文本

Question

我的游戏点击按钮后，屏幕上出现7张图片。我想为每个图像分配数值（图像是随机选择的）所以当出现 7 张图像时，下面的框中将是图像的总数 "worth"（所有 7 个分配的数值相加） .我该怎么做呢？这是我使随机图像出现的代码（所有 7 个代码）

<script>
    function randomImg2() {
      var myImages1 = new Array ();
      myImages1[1] = "Pack2/benteke.png";
      myImages1[2] = "Pack2/berg.png";
      myImages1[3] = "Pack2/cahill.png";
      myImages1[4] = "Pack2/cavani.png";
      myImages1[5] = "Pack2/costa.png";
      myImages1[6] = "Pack2/courtois.png";
      myImages1[7] = "Pack2/dawson.png";
      myImages1[8] = "Pack2/donovan.png";
      myImages1[9] = "Pack2/gomez.png";
      myImages1[10] = "Pack2/henry.png";
      myImages1[11] = "Pack2/lloris.png";
      myImages1[12] = "Pack2/navas.png";
      myImages1[13] = "Pack2/romao.png";
      myImages1[14] = "Pack2/taison.png";
      myImages1[15] = "Pack2/sneijder.png";
      myImages1[16] = "Pack2/alan1.png";
      myImages1[17] = "Pack2/barkley.png";
      myImages1[18] = "Pack2/begovic.png";
      myImages1[19] = "Pack2/cabella.png";
      myImages1[20] = "Pack2/capel.png";
      myImages1[21] = "Pack2/carlos.png";
      myImages1[22] = "Pack2/crespo.png";
      myImages1[23] = "Pack2/diaby.png";
      myImages1[24] = "Pack2/fowler.png";
      myImages1[25] = "Pack2/gullit.png";
      myImages1[26] = "Pack2/howedes.png";
      myImages1[27] = "Pack2/idk.png";
      myImages1[28] = "Pack2/kivrak.png";
      myImages1[29] = "Pack2/kucka.png";
      myImages1[30] = "Pack2/last.png";
      myImages1[31] = "Pack2/last2.png";
      myImages1[32] = "Pack2/lehmann.png";
      myImages1[33] = "Pack2/maldini.png";
      myImages1[34] = "Pack2/messi.png";
      myImages1[35] = "Pack2/messi inform.png";
      myImages1[36] = "Pack2/messi toty.png";
      myImages1[37] = "Pack2/rojo.png";
      myImages1[38] = "Pack2/ronaldo.png";
      myImages1[39] = "Pack2/sar.png";
      myImages1[40] = "Pack2/suker.png";
      myImages1[41] = "Pack2/ramos.png";

      var rnd = Math.floor( Math.random() * myImages1.length );
if (rnd == 0) {
        rnd = 1;
    }

document.getElementById('button2').innerHTML = '<img class="who" src="' + myImages1[rnd] + '"/>'
    }
</script>
<script>
    function randomImg3() {
      var myImages1 = new Array ();
      myImages1[1] = "Pack3/akin.png";
      myImages1[2] = "Pack3/asamoah.png";
      myImages1[3] = "Pack3/astori.png";
      myImages1[4] = "Pack3/balotelling.png";
      myImages1[5] = "Pack3/boetius.png";
      myImages1[6] = "Pack3/bony.png";
      myImages1[7] = "Pack3/danny.png";
      myImages1[8] = "Pack3/dzeko.png";
      myImages1[9] = "Pack3/elia.png";
      myImages1[10] = "Pack3/evra.png";
      myImages1[11] = "Pack3/fabregas.png";
      myImages1[12] = "Pack3/fellaini.png";
      myImages1[13] = "Pack3/hulk.png";
      myImages1[14] = "Pack3/hunt.png";
      myImages1[15] = "Pack3/lennon.png";
      myImages1[16] = "Pack3/leonardo.png";
      myImages1[17] = "Pack3/lukaku.png";
      myImages1[18] = "Pack3/marchisio.png";
      myImages1[19] = "Pack3/mavuba.png";
      myImages1[20] = "Pack3/mertesacker.png";
      myImages1[21] = "Pack3/muntari.png";
      myImages1[22] = "Pack3/nani.png";
      myImages1[23] = "Pack3/reus.png";
      myImages1[24] = "Pack3/ribery.png";
      myImages1[25] = "Pack3/rodrigo.png";
      myImages1[26] = "Pack3/sanchez.png";
      myImages1[27] = "Pack3/schurrle.png";
      myImages1[28] = "Pack3/sterling.png";
      myImages1[29] = "Pack3/turan.png";
      myImages1[30] = "Pack3/uche.png";
      myImages1[31] = "Pack3/valencia.png";
      myImages1[32] = "Pack3/vermaelen.png";
      myImages1[33] = "Pack3/vitolo.png";
      myImages1[34] = "Pack3/walker.png";
      myImages1[35] = "Pack3/witsel.png";
      myImages1[36] = "Pack3/xavi.png";
      var rnd = Math.floor( Math.random() * myImages1.length );
if (rnd == 0) {
        rnd = 1;
    }

document.getElementById('button3').innerHTML = '<img class="who" src="' + myImages1[rnd] + '"/>'
    }
</script>
<script>
    function randomImg4() {
      var myImages1 = new Array ();
      myImages1[1] = "Pack4/aguero.png";
      myImages1[2] = "Pack4/alba.png";
      myImages1[3] = "Pack4/atsu.png";
      myImages1[4] = "Pack4/bacca.png";
      myImages1[5] = "Pack4/benarfa.png";
      myImages1[6] = "Pack4/benzema.png";
      myImages1[7] = "Pack4/blind.png";
      myImages1[8] = "Pack4/buffon.png";
      myImages1[9] = "Pack4/bystrov.png";
      myImages1[10] = "Pack4/casilla.png";
      myImages1[11] = "Pack4/clichy.png";
      myImages1[12] = "Pack4/dembele.png";
      myImages1[13] = "Pack4/farfan.png";
      myImages1[14] = "Pack4/hazard.png";
      myImages1[15] = "Pack4/howard.png";
      myImages1[16] = "Pack4/ibarbo.png";
      myImages1[17] = "Pack4/inler.png";
      myImages1[18] = "Pack4/jovetic.png";
      myImages1[19] = "Pack4/keane.png";
      myImages1[20] = "Pack4/keita.png";
      myImages1[21] = "Pack4/lewandowski.png";
      myImages1[22] = "Pack4/luis.png";
      myImages1[23] = "Pack4/luisao.png";
      myImages1[24] = "Pack4/luiz.png";
      myImages1[25] = "Pack4/matic.png";
      myImages1[26] = "Pack4/matip.png";
      myImages1[27] = "Pack4/mollo.png";
      myImages1[28] = "Pack4/oscar.png";
      myImages1[29] = "Pack4/perrin.png";
      myImages1[30] = "Pack4/piszczek.png";
      myImages1[31] = "Pack4/piti.png";
      myImages1[32] = "Pack4/rafa.png";
      myImages1[33] = "Pack4/reina.png";
      myImages1[34] = "Pack4/robbie.png";
      myImages1[35] = "Pack4/rodriguez.png";
      myImages1[36] = "Pack4/ronaldi.png";
      myImages1[37] = "Pack4/sakho.png";
      myImages1[38] = "Pack4/tarasov.png";
      myImages1[39] = "Pack4/tiote.png";
      myImages1[40] = "Pack4/vidic.png";
      myImages1[41] = "Pack4/walcott.png";
      var rnd = Math.floor( Math.random() * myImages1.length );
if (rnd == 0) {
        rnd = 1;
    }

document.getElementById('button4').innerHTML = '<img class="who" src="' + myImages1[rnd] + '"/>'
    }
</script>
<script>
    function randomImg5() {
    var myImages1 = new Array ();
      myImages1[1] = "Pack5/alonso.png";
      myImages1[2] = "Pack5/beto.png";
      myImages1[3] = "Pack5/busq.png";
      myImages1[4] = "Pack5/campbell.png";
      myImages1[5] = "Pack5/carrillo.png";
      myImages1[6] = "Pack5/cassano.png";
      myImages1[7] = "Pack5/cerci.png";
      myImages1[8] = "Pack5/cesar.png";
      myImages1[9] = "Pack5/coleman.png";
      myImages1[10] = "Pack5/defoe.png";
      myImages1[11] = "Pack5/dempsey.png";
      myImages1[12] = "Pack5/diarra.png";
      myImages1[13] = "Pack5/dijk.png";
      myImages1[14] = "Pack5/diouf.png";
      myImages1[15] = "Pack5/dost.png";
      myImages1[16] = "Pack5/doumbia.png";
      myImages1[17] = "Pack5/felipe.png";
      myImages1[18] = "Pack5/fer.png";
      myImages1[19] = "Pack5/garay.png";
      myImages1[20] = "Pack5/gourcuff.png";
      myImages1[21] = "Pack5/guzman.png";
      myImages1[22] = "Pack5/higuain.png";
      myImages1[23] = "Pack5/hummels.png";
      myImages1[24] = "Pack5/iborra.png";
      myImages1[25] = "Pack5/isco.png";
      myImages1[26] = "Pack5/ivanovic.png";
      myImages1[27] = "Pack5/kroos.png";
      myImages1[28] = "Pack5/martinez.png";
      myImages1[29] = "Pack5/navas.png";
      myImages1[30] = "Pack5/pirlo.png";
      myImages1[31] = "Pack5/rakitic.png";
      myImages1[32] = "Pack5/ruffier.png";
      myImages1[33] = "Pack5/santon.png";
      myImages1[34] = "Pack5/schar.png";
      myImages1[35] = "Pack5/szalai.png";
      myImages1[36] = "Pack5/tosic.png";
      myImages1[37] = "Pack5/valdes.png";
      myImages1[38] = "Pack5/varane.png";
      myImages1[39] = "Pack5/villa.png";
      var rnd = Math.floor( Math.random() * myImages1.length );
if (rnd == 0) {
        rnd = 1;
    }

document.getElementById('button5').innerHTML = '<img class="who" src="' + myImages1[rnd] + '"/>'
    }
</script>
<script>
    function randomImg6() {
      var myImages1 = new Array ();
      myImages1[1] = "Pack6/aogo.png";
      myImages1[2] = "Pack6/arbeloa.png";
      myImages1[3] = "Pack6/aurier.png";
      myImages1[4] = "Pack6/baines.png";
      myImages1[5] = "Pack6/bender.png";
      myImages1[6] = "Pack6/caceres.png";
      myImages1[7] = "Pack6/cole.png";
      myImages1[8] = "Pack6/crouch.png";
      myImages1[9] = "Pack6/cuadrado.png";
      myImages1[10] = "Pack6/demba.png";
      myImages1[11] = "Pack6/depay.png";
      myImages1[12] = "Pack6/enrique.png";
      myImages1[13] = "Pack6/gerrard.png";
      myImages1[14] = "Pack6/hamsik.png";
      myImages1[15] = "Pack6/honda.png";
      myImages1[16] = "Pack6/huth.png";
      myImages1[17] = "Pack6/inan.png";
      myImages1[18] = "Pack6/jarvis.png";
      myImages1[19] = "Pack6/lahm.png";
      myImages1[20] = "Pack6/lamela.png";
      myImages1[21] = "Pack6/leno.png";
      myImages1[22] = "Pack6/lucas.png";
      myImages1[23] = "Pack6/maicon.png";
      myImages1[24] = "Pack6/mata.png";
      myImages1[25] = "Pack6/matuidi.png";
      myImages1[26] = "Pack6/mikel.png";
      myImages1[27] = "Pack6/motta.png";
      myImages1[28] = "Pack6/nasri.png";
      myImages1[29] = "Pack6/neuer.png";
      myImages1[30] = "Pack6/neymar.png";
      myImages1[31] = "Pack6/pabon.png";
      myImages1[32] = "Pack6/pele.png";
      myImages1[33] = "Pack6/pogba.png";
      myImages1[34] = "Pack6/prodl.png";
      myImages1[35] = "Pack6/ramos.png";
      myImages1[36] = "Pack6/robben.png";
      myImages1[37] = "Pack6/rondon.png";
      myImages1[38] = "Pack6/ruiter.png";
      myImages1[39] = "Pack6/sane.png";
      myImages1[40] = "Pack6/sergio.png";
      myImages1[41] = "Pack6/silva.png";
      myImages1[42] = "Pack6/subotic.png";
      myImages1[43] = "Pack6/torres.png";
      myImages1[44] = "Pack6/zarate.png";
      var rnd = Math.floor( Math.random() * myImages1.length );
if (rnd == 0) {
        rnd = 1;
    }

document.getElementById('button6').innerHTML = '<img class="who" src="' + myImages1[rnd] + '"/>'
    }
</script>
<script>
    function randomImg7() {
      var myImages1 = new Array ();
      myImages1[1] = "Pack7/agger.png";
      myImages1[2] = "Pack7/benatia.png";
      myImages1[3] = "Pack7/boateng.png";
      myImages1[4] = "Pack7/bruma.png";
      myImages1[5] = "Pack7/callejon.png";
      myImages1[6] = "Pack7/correa.png";
      myImages1[7] = "Pack7/costa.png";
      myImages1[8] = "Pack7/degea.png";
      myImages1[9] = "Pack7/eliseu.png";
      myImages1[10] = "Pack7/eriksen.png";
      myImages1[11] = "Pack7/gakpe.png";
      myImages1[12] = "Pack7/godin.png";
      myImages1[13] = "Pack7/guarin.png";
      myImages1[14] = "Pack7/hernanes.png";
      myImages1[15] = "Pack7/herrmann.png";
      myImages1[16] = "Pack7/jardel.png";
      myImages1[17] = "Pack7/jefferson.png";
      myImages1[18] = "Pack7/juanfran.png";
      myImages1[19] = "Pack7/konko.png";
      myImages1[20] = "Pack7/lallana.png";
      myImages1[21] = "Pack7/mangala.png";
      myImages1[22] = "Pack7/marlos.png";
      myImages1[23] = "Pack7/medel.png";
      myImages1[24] = "Pack7/modric.png";
      myImages1[25] = "Pack7/montoya.png";
      myImages1[26] = "Pack7/musa.png";
      myImages1[27] = "Pack7/ochoa.png";
      myImages1[28] = "Pack7/ozil.png";
      myImages1[29] = "Pack7/pique.png";
      myImages1[30] = "Pack7/remy.png";
      myImages1[31] = "Pack7/rooney.png";
      myImages1[32] = "Pack7/smalling.png";
      myImages1[33] = "Pack7/sterling.png";
      myImages1[34] = "Pack7/trasch.png";
      myImages1[35] = "Pack7/ukra.png";
      myImages1[36] = "Pack7/wakaso.png";
      myImages1[37] = "Pack7/zengin.png";
      var rnd = Math.floor( Math.random() * myImages1.length );
if (rnd == 0) {
        rnd = 1;
    }

document.getElementById('button7').innerHTML = '<img class="who" src="' + myImages1[rnd] + '"/>'
    }
</script>
<script>
    function randomImg8() {
      var myImages1 = new Array ();
      myImages1[1] = "Pack8/carroll.png";
      myImages1[2] = "Pack8/essien.png";
      myImages1[3] = "Pack8/falcao.png";
      myImages1[4] = "Pack8/fazio.png";
      myImages1[5] = "Pack8/ferdinand.png";
      myImages1[6] = "Pack8/figo.png";
      myImages1[7] = "Pack8/castan.png";
      myImages1[8] = "Pack8/koke.png";
      myImages1[9] = "Pack8/naldo.png";
      myImages1[10] = "Pack8/kweuke.png";
      myImages1[11] = "Pack8/olsson.png";
      myImages1[12] = "Pack8/eto.png";
      myImages1[13] = "Pack8/ramsey.png";
      myImages1[14] = "Pack8/gustavo.png";
      myImages1[15] = "Pack8/arteta.png";
      myImages1[16] = "Pack8/fernando.png";
      myImages1[17] = "Pack8/xandao.png";
      myImages1[18] = "Pack8/mandanda.png";
      myImages1[19] = "Pack8/rafinha.png";
      myImages1[20] = "Pack8/ciani.png";
      myImages1[21] = "Pack8/parejo.png";
      myImages1[22] = "Pack8/young.png";
      myImages1[23] = "Pack8/tadic.png";
      myImages1[24] = "Pack8/vargas.png";
      myImages1[25] = "Pack8/rossi.png";
      myImages1[26] = "Pack8/moralez.png";
      myImages1[27] = "Pack8/distin.png";
      myImages1[28] = "Pack8/melo.png";
      myImages1[29] = "Pack8/hart.png";
      myImages1[30] = "Pack8/ibra.png";
      myImages1[31] = "Pack8/immobile.png";
      myImages1[32] = "Pack8/khedira.png";
      myImages1[33] = "Pack8/lampard.png";
      myImages1[34] = "Pack8/lavezzi.png";
      myImages1[35] = "Pack8/okocha.png";
      myImages1[36] = "Pack8/shaqiri.png";
      myImages1[37] = "Pack8/tevez.png";
      myImages1[38] = "Pack8/vanbasten.png";
      myImages1[39] = "Pack8/vanpersie.png";
      var rnd = Math.floor( Math.random() * myImages1.length );
if (rnd == 0) {
        rnd = 1;
    }
document.getElementById('button8').innerHTML = '<img class="who" src="' + myImages1[rnd] + '"/>'
    }
</script>

Answer 1

为每个图像添加数据值属性（支持）。当显示所有图像时，您可以查看每个图像并获取其值：

document.getElementById('button8').innerHTML =
 '<img class="who" src="' + myImages1[rnd] + '" data-value="' + some_value + '" />'

使用 JavaScript 和 html 同时显示图像和文本

Present an image & TEXT at this same time with JavaScript and html

html

javascript

text