如何在html中为图像分配数字

How to assign a number to an image in html?

本文关键字：图像 分配 数字 html      更新时间：2023-09-26

要清楚，我如何将图像与数字相关联?我正在尝试使用javascript制作一个"多少手指游戏"。我将用图像来回答。每个数字都有对应的图像。(例如，用一根手指表示答案1的图片。)当其中一张图片被点击时，程序将检查随机数(0、1、2、3、4或5)是否等于图片中的手指数。

我猜img标签不能得到一个值属性。我试着给每个图像一个值，并根据这个值设置一个if语句，但它不起作用。

它总是给出错误作为输出。jsfiddle: http://jsfiddle.net/4g0weo75/

<!doctype html>
  <html>
    <head>
      <title>Java script</title>
      <meta charset="utf-8" />
      <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <style type="text/css">
      .break{
        clear:both;
      }
      #answer{
        float:left;
      }
      #myButton{
        float:left;
      }
      .fingers{
        float:left;
        display:block;
        padding-right:50px;
      }
      .fingers img{
        border:1px solid black;
        border-radius:20px;
      }
      </style>
    </head>
    <body>
      <img width="100px" height="auto" src="http://i62.tinypic.com/2rr55xv_th.jpg" />
      <p>How many fingers am I holding up?</p>
      <div class="break"></div>
      <p class="fingers"><img id="zero" src="http://i61.tinypic.com/140jfnp_th.png" value="0" /></p>
      <p class="fingers"><img id="one" src="http://i61.tinypic.com/6tfgpv_th.png" value="1" /></p>
      <p class="fingers"><img id="two" src="http://i62.tinypic.com/2w685ya_th.png" value="2" /></a></p>
      <p class="fingers"><img id="three" src="http://i58.tinypic.com/hsrksj_th.png" value="3" /></a></p>
      <p class="fingers"><img id="four" src="http://i57.tinypic.com/igdfrc_th.png" value="4" /></a></p>
      <p class="fingers"><img id="five" src="http://i60.tinypic.com/2useki1_th.png" value="5" /></a></p>
      <script type="text/javascript">
        document.getElementById("zero").onclick=function(){
          var x=Math.random(x);
          x=6*x;
          x=Math.floor(x);
          if (x==document.getElementById("zero").value){
            alert ("You got it!!");
          }else {
            alert ("You're wrong. The number was: "+x);
          }
        }
        document.getElementById("one").onclick=function(){
          var x=Math.random(x);
          x=6*x;
          x=Math.floor(x);
          if (x==document.getElementById("one").value){
            alert ("You got it!!");
          }else {
            alert ("You're wrong. The number was: "+x);
          }
        }
        document.getElementById("two").onclick=function(){
          var x=Math.random(x);
          x=6*x;
          x=Math.floor(x);
          if (x==document.getElementById("two").value){
            alert ("You got it!!");
          }else {
            alert ("You're wrong. The number was: "+x);
          }
        }
        document.getElementById("three").onclick=function(){
          var x=Math.random(x);
          x=6*x;
          x=Math.floor(x);
          if (x==document.getElementById("three").value){
            alert ("You got it!!");
          }else {
            alert ("You're wrong. The number was: "+x);
          }
        }
        document.getElementById("four").onclick=function(){
          var x=Math.random(x);
          x=6*x;
          x=Math.floor(x);
          if (x==document.getElementById("four").value){
            alert ("You got it!!");
          }else {
            alert ("You're wrong. The number was: "+x);
          }
        }
        document.getElementById("five").onclick=function(){
          var x=Math.random(x);
          x=6*x;
          x=Math.floor(x);

          if (x==document.getElementById("five").value){
            alert ("You got it!!");
          }else {
            alert ("You're wrong. The number was: "+x);
          }
        }
      </script>
    </body>
  </html>
  <!-- end snippet -->

你应该尝试使用html5中可用的data属性，你可以将代码更改为:

    <p class="fingers"><img id="zero" src="http://i61.tinypic.com/140jfnp_th.png" data-value="0" /></p>
    <p class="fingers"><img id="one" src="http://i61.tinypic.com/6tfgpv_th.png" data-value="1" /></p>
    <p class="fingers"><img id="two" src="http://i62.tinypic.com/2w685ya_th.png" data-value="2" /></a></p>
    <p class="fingers"><img id="three" src="http://i58.tinypic.com/hsrksj_th.png" data-value="3" /></a></p>
    <p class="fingers"><img id="four" src="http://i57.tinypic.com/igdfrc_th.png" data-value="4" /></a></p>
    <p class="fingers"><img id="five" src="http://i60.tinypic.com/2useki1_th.png" data-value="5" /></a></p>

那么您可以使用以下行:

document.getElementById("zero").getAttribute('data-value')

在这种情况下，value是标签的属性，因此document.getElementById("two").value使用document.getElementById("two").getAttribute('value')代替。您可以使用document.getElementById('some_form_element_id').value与表单元素-图像不是一个表单元素。

相关文章：