在此代码中，onClick 处理程序永远不会被调用：
<html>
<head>
<title>Sample Web Page</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<form name=sampleform>
<div id="mainpage">
<img class="pageframe" src="images/Page 1.jpg" />
<input type="image" class="page2img" src="images/page2-link.jpg" onClick="DisplayPage2()"></input>
<input type="image" class="page3img" src="images/page3-link.jpg" onClick="DisplayPage3()"></input>
</div>
<script>
function DisplayPage2() {
document.getElementById("mainpage").innerHTML = "<img class="pageframe" src="images/Page 2.jpg" />";
}
function DisplayPage3() {
document.getElementById("mainpage").innerHTML = "<img class="pageframe" src="images/Page 3.jpg" />";
}
</script>
</form>
</body>
</html>
我可以知道图像被点击，因为当我点击它们时，鼠标坐标显示在 URL 中，但 onClick 处理程序没有被调用。根据文档，onClick 不适用于图像类型的输入控件。鉴于此，如何让图像输入控件正常工作？
代码中的问题源于 JavaScript 字符串中双引号的不当使用，这会导致语法错误。
您应该转义内部双引号或对
innerHTMLfunction DisplayPage2() {
document.getElementById("mainpage").innerHTML = '<img class="pageframe" src="images/Page 2.jpg" />';
}
function DisplayPage3() {
document.getElementById("mainpage").innerHTML = '<img class="pageframe" src="images/Page 3.jpg" />';
}