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

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

我看了其他几个问题，它们似乎使用了更复杂的编码或jquery。我想尝试用最简单的方法来做这件事，我觉得这是一个很好的方法。谢谢

以下是我所拥有的：

var pic=document.getElementById（'pic'）；
var word=document.getElementById（'clickme1'）；
word.onclick=函数（）{
pic.src=“image1.jpg”
}
var pic2=document.getElementById（'pic'）；
var word2=document.getElementById（'clickme2'）；
word.onclick=函数（）{
pic2.src=“image2.jpg”
}
var pic3=document.getElementById（'pic'）；
var word3=document.getElementById（'clickme3'）；
word.onclick=函数（）{
pic3.src=“image3.jpg”
}
var pic4=document.getElementById（'pic'）；
var word4=document.getElementById（'clickme4'）；
word.onclick=函数（）{
pic4.src=“image4.jpg”
}

你好
这是我想点击的第一个词
第二个词
第三个词
向前地

您使用了错误的“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>

var pic=document.getElementById（'pic'）；
var word=document.getElementById（'clickme1'）；
word.onclick=函数（）{
pic.src=“image1.jpg”
}
var pic2=document.getElementById（'pic'）；
var word2=document.getElementById（'clickme2'）；
//word.onclick=函数（）{
word2.onclick=function（）{
pic2.src=“image2.jpg”
}
var pic3=document.getElementById（'pic'）；
var word3=document.getElementById（'clickme3'）；
//word.onclick=函数（）{
word3.onclick=函数（）{
pic3.src=“image3.jpg”
}
var pic4=document.getElementById（'pic'）；
var word4=document.getElementById（'clickme4'）；
//word.onclick=函数（）{
word4.onclick=function（）{
pic4.src=“image4.jpg”
}

问题在于您的功能，重命名为唯一名称：

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"
}

---

没有一个答案能够捕捉到代码中的所有错误：

您需要使用单击时正在更改的

我相信您的

word

变量命名有问题，但现在看来您已经改变了

---

您可以尝试以下方法：

修复图像的

属性

我为悬停添加了一些样式，以便轻松区分单击的单词

我缩小了图像的大小，使文本在屏幕上可见

var pic=document.getElementById（'pic'）；
var word=document.getElementById（'clickme1'）；
word.onclick=函数（）{
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=函数（）{
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"
}

span[id^=“clickme”]：悬停{
背景：#FF0；
}

你好
这是我想点击的第一个词
第二个词
第三个词
向前地

html中的图像使用

img

tag not

image

代码1中有2个错误。img not image和其他变量在每个事件中使用word是可变的。是的，您也只需要对图像进行1次引用。不需要pic 1-4，只需使用：var pic=document.getElementById（'pic'））；您可能希望在这里更具体一些-OP错误地使用了什么变量？更多信息将有助于OP了解他们做错了什么。