当我们点击一个特定的字母表时，它应该显示相关的图像.使用JavaScript

When we click on a particular alphabet it should display relevant image..Using JavaScript

本文关键字：显示 JavaScript 使用 图像 字母表 一个 我们      更新时间：2023-09-26

我尝试使用java脚本。。当我点击字母表时，我看不到图像。我对java脚本很陌生。感谢您的帮助。

    function iterateAlphabet(var index)
{
        var nextChar;
        var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
            for(var index=0; index<str.length; index++)
            {
                nextChar = str.charAt(index);
                break;
            }
        return nextChar;
    }
    function getCharacter(var index)
        var  character = document.getElementById("alphabetA");
        character.innerText=iterateAlphabet(index);
}
    </script>
</head>
<body>
    <table>
        <tr>
        <td><input type="image" src="imgs''1.jpg" alt="a"  id="alphabetA"  onclick ="iterateAlphabet('0')" value="Apple"></input></td>
    </table>

HTML结构（根据需要进行样式设置，只需保留元素的id，或者根据需要在HTML和js中更改它们）：

<table>
        <tr>
        <td id="letters" onclick ="iterateAlphabet()">
        A
        </td>
        <td> <img src='A.jpg' id="alpha" ></td>
    </table>

Javascript：

i = 0;
function iterateAlphabet()
{
  var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  if (i < str.length)
  {
    i++;
    var nextChar = str.charAt(i);
document.getElementById("letters").innerHTML = nextChar;
    document.getElementById("alpha").src = nextChar + '.jpg';

    if (i == str.length - 1)
    {
      i = -1;
    }
  }
}

最重要的是：-您应该将名为A.jpg、B.jpg等的图像放在同一目录中，这样就可以了。

尝试此功能

（函数iterateAlphabet（）｛

 var alpha = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split(''),
     imageUrl = "http://dummyimage.com/50x50/2e2e2e/fff&text=";
alpha.forEach( function(el){
  var link = document.createElement('A');
      link.href = imageUrl + el;
      link.innerHTML = el;
   // console.log(link); 
    document.write(link); // you can use any code here to show the links
 });

})（）

相关文章：