Question

对于概要Web应用程序，我试图在您单击时更改图像。我编写了如下代码（在jsp文件中），但我想将JavaScript与HTML分开（下一个代码运行良好）：

<head>
    <script type='text/javascript'>
        function ChangeState(){
            if(document.getElementById('imageStateBlue')!=null){
                var img=document.getElementById('imageStateBlue');
                img.setAttribute('alt', 'State: red');
                img.setAttribute('id', 'imageStateRed');
                img.setAttribute('src', 'pages/synoptique/src/images/red.png');}
            else{
                if(document.getElementById('imageStateRed')!=null){
                    var img=document.getElementById('imageStateRed');
                    img.setAttribute('alt', 'State: blue');
                    img.setAttribute('id', 'imageStateBlue');
                    img.setAttribute('src', 'pages/synoptique/src/images/blue.png');}}}
    </script>
</head>
<body>
    <img alt='State: blue' id='imageStateBlue' onclick='ChangeState()' src='pages/synoptique/src/images/blue.png'/>
</body>

所以，我尝试过（在ChangeState.js中使用相同的js代码）（下一个代码不能正常工作）：

<head>
    <script type='text/javascript' src='pages/synoptique/js/ChangeState.js'></script>
</head>
<body>
    <img alt='State: blue' id='imageStateBlue' onclick='ChangeState()' src='pages/synoptique/src/images/blue.png'/>
</body>

那（这两个下一个代码不能很好地工作）：

<head>
    <script type='text/javascript' src='pages/synoptique/js/ChangeState.js'></script>
</head>
<body>
    <img alt='State: blue' id='imageStateBlue' src='pages/synoptique/src/images/blue.png'/>
</body>

使用ChangeState.js：

function toRed(){
    var img=document.getElementById('imageStateBlue');
    img.setAttribute('alt', 'State: red');
    img.setAttribute('id', 'imageStateRed');
    img.setAttribute('src', 'pages/synoptique/src/images/red.png');}
function toBlue(){
    var img=document.getElementById('imageStateRed');
    img.setAttribute('alt', 'State: blue');
    img.setAttribute('id', 'imageStateBlue');
    img.setAttribute('src', 'pages/synoptique/src/images/blue.png');}
function imgClick(){
    document.getElementById('imageStateBlue').addEventListener('click', toRed, true);
    document.getElementById('imageStateRed').addEventListener('click', toBlue, true);}
window.addEventListener('load', imgClick, true);

但没有任何作用。它似乎不会在页面加载时导入。（当代码不能正常工作时，我的意思是图像在点击时不会改变。）

Answer 1

您尚未正确添加点击事件。

document.getElementById('imageStateBlue').addEventListener('click', toRed, true);
document.getElementById('imageStateRed').addEventListener('click', toBlue, true);}

更改后，它会从事件中删除id吗？因此，您需要做的是更改ID后，重新分配事件侦听器。因此，在toBlue和toRed函数中，重新声明事件侦听器。

function toRed(){
    var img=document.getElementById('imageStateBlue');
    img.setAttribute('alt', 'State: red');
    img.setAttribute('id', 'imageStateRed');
    img.setAttribute('src', 'pages/synoptique/src/images/red.png');
    document.getElementById('imageStateRed').addEventListener('click', toBlue, true);
}
function toBlue(){
    var img=document.getElementById('imageStateRed');
    img.setAttribute('alt', 'State: blue');
    img.setAttribute('id', 'imageStateBlue');
    img.setAttribute('src', 'pages/synoptique/src/images/blue.png');
    document.getElementById('imageStateRed').addEventListener('click', toBlue, true);
}

第一个imgClick会失败，因为其中一个图片不存在。这也可能导致事件设置失败。

Answer 2

您无法指定让处理程序响应ID更改

function ChangeState() {
  var img = this;
  if (/blue.png$/.test(img.src)) {
    img.setAttribute('alt', 'State: red');
    img.setAttribute('id', 'imageStateRed');
    img.setAttribute('src', 'pages/synoptique/src/images/red.png');
  } else {
    img.setAttribute('alt', 'State: blue');
    img.setAttribute('id', 'imageStateBlue');
    img.setAttribute('src', 'pages/synoptique/src/images/blue.png');
  }
}

function imgClick() {
  document.getElementById('imageState').addEventListener('click', ChangeState, true);
}
window.addEventListener('load', imgClick, true);

<img alt='State: blue' id='imageState' src='pages/synoptique/src/images/blue.png' />

单击事件并将JavaScript与HTML分开

2 个答案: