时间戳

首页 > 解决方案 > 创建 3 个不同的按钮，每次单击都会显示新图像

javascript - 创建 3 个不同的按钮，每次单击都会显示新图像

问题描述

我正在尝试创建一个显示 3 个按钮的 javascript，并且每个按钮都会根据该按钮显示不同的图像。以下是我到目前为止所拥有的。问题是我只显示 3 个按钮，但是当我单击按钮显示图像时没有任何动作发生。提前感谢您的帮助。

<script type = "text/javascript">
    function pic1()
    {
        document.getElementById("png").src = "C:\Users\aj\Desktop\Red Light.png";
    }
    function pic2()
    {
        document.getElementById("png").src ="C:\Users\aj\Desktop\Green Light.png";
    } 
function pic3()
    {
        document.getElementById("png").src = "C:\Users\aj\Desktop\Yellow Light.png";
    }</script>

<img src = "" id = "png "/> <input type="button" value= "Red Light" onclick="pic1()"/> 
<input type="button" value="Green Light" onclick="pic2()"/> <input type="button" value="Yellow Light" onclick="pic3()"/>

标签： javascripthtml

解决方案

从您的值中删除额外空间后，以这种方式进行操作，<img src="" id="png" />即。否则会png导致pngTypeError: document.getElementById(...) is null

您还可以将多个功能删除为一个，例如pic1()、pic2()、pic3()到pic(this)，并根据按钮的值设置src您希望的图像（我为此使用了一些在线演示图像例子）。希望能帮助到你 ：）

<script type="text/javascript">
  function pic(param) {
    if (param.value === 'Red Light') {
      document.getElementById("png").src = "https://is5-ssl.mzstatic.com/image/thumb/Music71/v4/0f/79/15/0f79154d-fe37-001c-be03-51a29d458f22/source/1200x630bb.jpg";
      
    } else if (param.value === 'Green Light') {
      document.getElementById("png").src = "https://socialcare.blog.gov.uk/wp-content/uploads/sites/8/2013/12/green-traffic-light-md.png";
      
    } else if (param.value === 'Yellow Light')  {
      document.getElementById("png").src = "http://www.clker.com/cliparts/8/1/7/4/11949849782053089133traffic_light_yellow_dan_01.svg.med.png";
    }
    //console.log(param.value)

  }
</script>

<img src="" id="png" style="width:30px; height:30px;" />
<input type="button" value="Red Light" onclick="pic(this)" />
<input type="button" value="Green Light" onclick="pic(this)" />
<input type="button" value="Yellow Light" onclick="pic(this)" />

推荐阅读