通过单击不同的单词，图像会多次更改

Question

我是javascript的初学者。我试图遇到一系列单词的情况，每个单词在单击时将背景更改为不同的图像。目前其中一个功能正在运行，但我似乎无法让其他功能正常工作。我知道我做错了什么，但我不知道该改变什么。

我已经查看了其他几个问题，他们似乎使用更复杂的编码或使用jquery。我想以最简单的方式尝试这样做，我觉得这是一个很好的方法。谢谢！

这就是我所拥有的：

var pic = document.getElementById('pic');
var word = document.getElementById('clickme1');

word.onclick = function() {
  pic.src = "image1.jpg"
}

var pic2 = document.getElementById('pic');
var word2 = document.getElementById('clickme2');

word.onclick = function() {
  pic2.src = "image2.jpg"
}

var pic3 = document.getElementById('pic');
var word3 = document.getElementById('clickme3');

word.onclick = function() {
  pic3.src = "image3.jpg"
}

var pic4 = document.getElementById('pic');
var word4 = document.getElementById('clickme4');

word.onclick = function() {
  pic4.src = "image4.jpg"
}

<image id="pic" width="1000" height "400" src="image.jpg" /></image>

<div id="container">hello,
  <span id="clickme1">heres the first word I want clicked on</span>
  <span id="clickme2">second word</span> 
  <span id="clickme3">third word</span>
  <span id="clickme4">forth</span>
</div>

Answer 1

您可以尝试以下方法：

1. 修复您的<img>标记以使用正确的名称。
2. 删除对img#pic。
的多个引用

备注

1. 当您更新图片的src属性时，我使用了占位符图片来查看正在发生的事情。
2. 我添加了一些悬停样式，以便轻松区分您点击的单词。
3. 我缩小了图片的大小，以便在屏幕上显示文字。
＆＃13;
＆＃13;
var pic = document.getElementById('pic');

var word = document.getElementById('clickme1');
word.onclick = function() {
  pic.src = "http://placehold.it/180x120/AA4444/E9EBFF.png&text=Image+1";
}

var word2 = document.getElementById('clickme2');
word2.onclick = function() {
  pic.src = "http://placehold.it/180x120/44AA44/E9EBFF.png&text=Image+2"
}

var word3 = document.getElementById('clickme3');
word3.onclick = function() {
  pic.src = "http://placehold.it/180x120/4444AA/E9EBFF.png&text=Image+3"
}

var word4 = document.getElementById('clickme4');
word4.onclick = function() {
  pic.src = "http://placehold.it/180x120/AA7744/E9EBFF.png&text=Image+4"
}
＆＃13;
span[id^="clickme"]:hover {
  background: #FF0;
}
＆＃13;
<img id="pic" width="180" height="120" src="http://placehold.it/180x120/445566/E9EBFF.png&text=Default" />

<div id="container">Hello,
  <span id="clickme1">heres the first word I want clicked on</span>
  <span id="clickme2">second word</span> 
  <span id="clickme3">third word</span>
  <span id="clickme4">forth</span>.
</div>
＆＃13;
＆＃13;
＆＃13;

---

动态方法

由于您要重复代码，因此最好使用class而不是id。以下是HTML5实现，使用data属性和一组图像作为参考。

对于具有.click-me类的每个元素，将添加一个单击侦听器以及data-pos属性以跟踪位置。此位置将根据单击的单词确定要加载的图像。

＆＃13;
＆＃13;
var pic = document.getElementById('pic');
var clickMeElements = document.querySelectorAll('span.click-me');

var images = [
  "http://placehold.it/180x120/AA4444/E9EBFF.png&text=Image+1",
  "http://placehold.it/180x120/44AA44/E9EBFF.png&text=Image+2",
  "http://placehold.it/180x120/4444AA/E9EBFF.png&text=Image+3",
  "http://placehold.it/180x120/AA7744/E9EBFF.png&text=Image+4"
];

for (var i = 0; i < clickMeElements.length; i++) {
  var clickMe = clickMeElements[i];
  
  clickMe.addEventListener('click', function(event) {
    pic.src = images[event.target.getAttribute('data-pos')];
  });
  
  clickMe.setAttribute('data-pos', i)
}
＆＃13;
span.click-me:hover {
  background: #FF0;
}
＆＃13;
<img id="pic" width="180" height="120" src="http://placehold.it/180x120/445566/E9EBFF.png&text=Default" />

<div id="container">Hello,
  <span class="click-me">heres the first word I want clicked on</span>
  <span class="click-me">second word</span> 
  <span class="click-me">third word</span>
  <span class="click-me">forth</span>.
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

所有答案都没有捕捉到您的代码的所有错误：

1. 您需要使用<img/>代替<image/>
2. 您的pic变量不需要重命名 - 您使用的是img元素，其src在点击时会被更改。
3. 我认为您的word变量命名存在问题，但现在看起来已经改变了。

Answer 3

你使用错误的'words'变量：

<script>

var pic = document.getElementById('pic');
var word =document.getElementById('clickme1');

word.onclick = function(){
pic.src = "image1.jpg"
}

var pic2 = document.getElementById('pic');
var word2 =document.getElementById('clickme2');

//word.onclick = function(){
word2.onclick = function(){
pic2.src = "image2.jpg"
}

var pic3 = document.getElementById('pic');
var word3 =document.getElementById('clickme3');

//word.onclick = function(){
word3.onclick = function(){
pic3.src = "image3.jpg"
}

var pic4 = document.getElementById('pic');
var word4 =document.getElementById('clickme4');

//word.onclick = function(){
word4.onclick = function(){
pic4.src = "image4.jpg"
}
</script>

Answer 4

您遇到的问题是您的功能，重命名为唯一名称：

var pic = document.getElementById('pic');
var word =document.getElementById('clickme1');

word1.onclick = function(){
   pic.src = "image1.jpg"
}

var pic2 = document.getElementById('pic');
var word2 =document.getElementById('clickme2');

word2.onclick = function(){
   pic2.src = "image2.jpg"
}

var pic3 = document.getElementById('pic');
var word3 =document.getElementById('clickme3');

word3.onclick = function(){
  pic3.src = "image3.jpg"
}

var pic4 = document.getElementById('pic');
var word4 =document.getElementById('clickme4');

word4.onclick = function(){
   pic4.src = "image4.jpg"
}