如何调试JavaScript代码中的点击事件处理? 函数SlideManager(){ if(document.getElementById('SImg').src.match(“Slide Image One.png”)) { document.getElementById('Slide').src=“SlideOne”; } if(document.getElementById('SImg').src.match(“Slide Image Two.png”)) { document.getElementById('Slide').src=“SlideTwo”; } if(document.getElementById('SImg').src.match(“Slide Image Two.png”)) { document.getElementById('Slide').src=“SlideTwo”; } }
我第一次使用JavaScript。当单击特定按钮/图像时,它应该更改图像如何调试JavaScript代码中的点击事件处理? 函数SlideManager(){ if(document.getElementById('SImg').src.match(“Slide Image One.png”)) { document.getElementById('Slide').src=“SlideOne”; } if(document.getElementById('SImg').src.match(“Slide Image Two.png”)) { document.getElementById('Slide').src=“SlideTwo”; } if(document.getElementById('SImg').src.match(“Slide Image Two.png”)) { document.getElementById('Slide').src=“SlideTwo”; } },javascript,html,Javascript,Html,我第一次使用JavaScript。当单击特定按钮/图像时,它应该更改图像 但它不起作用。您可能想这样做: <img id="Slide" src="SlideOne.png"></img> <img id="SImg" src="Slide Image One.png" onmouseover="this.src='Slide Image Hover One.png';" onmouseout="this.src='Slide Image One.png'
但它不起作用。您可能想这样做:
<img id="Slide" src="SlideOne.png"></img>
<img id="SImg" src="Slide Image One.png" onmouseover="this.src='Slide Image Hover One.png';" onmouseout="this.src='Slide Image One.png';" onclick="SlideManager()"></img>
<img id="SImg" src="Slide Image Two.png" onmouseover="this.src='Slide Image Hover Two.png';" onmouseout="this.src='Slide Image Two.png';" onclick="SlideManager()"></img>
<img id="SImg" src="Slide Image Three.png" onmouseover="this.src='Slide Image Hover Three.png';" onmouseout="this.src='Slide Image Three.png';" onclick="SlideManager()"></img>
</center>
<script>
function SlideManager() {
if(document.getElementById('SImg').src.match("Slide Image One.png"))
{
document.getElementById('Slide').src = "SlideOne";
}
if(document.getElementById('SImg').src.match("Slide Image Two.png"))
{
document.getElementById('Slide').src = "SlideTwo";
}
if(document.getElementById('SImg').src.match("Slide Image Two.png"))
{
document.getElementById('Slide').src = "SlideTwo";
}
}
</script>
单击“幻灯片图像二”按钮时,我想将“SlideOne”图像更改为“SlideTo”。请确切说明问题所在以及发生的位置,以便我们可以帮助您拥有具有相同ID的多个元素-这是不允许的。此处没有Java。javascript!==新图像“SlideOne”
和“slidewo”
没有文件扩展名。这些图像是什么格式的.png
,.jpg
,.gif
等。此外,
标记是自动关闭的,
是,您不能有多个元素具有相同的id
,并且在您的问题中没有提到PHP,因此[sonic]
标记不适用……您的src属性/参数可能有问题:JavaScript不允许您在变量和参数名称中使用空格。如果您必须在代码段中进行快速修复,则可以阅读JavaScript样式指南:
<img id="Slide" src="Slide Image One.png" />
<!-- id has to be unique, cannot use same id for multiple elements -->
<img id="Img1" src="Slide Image One.png" onmouseover="changeImage('Slide Image Hover One.png');" onmouseout="changeImage(currentSlide)" onclick="setCurrentSlide('Slide Image Hover One.png')" />
<!-- also <img /> is single-tag element -->
<img id="Img2" src="Slide Image Two.png" onmouseover="changeImage('Slide Image Hover Two.png');" onmouseout="changeImage(currentSlide)" onclick="setCurrentSlide('Slide Image Hover Two.png')" />
<img id="Img3" src="Slide Image Three.png" onmouseover="changeImage('Slide Image Hover Three.png');" onmouseout="changeImage(currentSlide)" onclick="setCurrentSlide('Slide Image Hover Three.png')" />
</center>
<script>
// use variable to remember current active slide (to be used to return to by mouseout)
var currentSlide = "Slide Image One.png";
// just temporarly change
function changeImage(name) {
document.getElementById('Slide').src = name;
}
// save new image to currentSlide and change image
function setCurrentSlide(name) {
currentSlide = name;
changeImage(currentSlide);
}
</script>