问题

<table style="width:70%">
<tr>
<th>
<center>0</center>
<img src="images/chairgreen.png" id="1" style="width:64px;height:64px;" onclick="changeImage(this)">
</th>
</tr>
</table>

<script>
function changeImage(imageElement) {
    if (imageElement.src.endsWith('chairgreen.png')) {
        imageElement.src = 'images/chairorange.png';
    } else if (imageElement.src.endsWith('chairorange.png')) {
        imageElement.src = 'images/chairgreen.png';
    }
}
</script>

问题在于onclick方法，但我不知道如何修复它。我也不知道如何将椅子的ID和颜色发送到后端。对于后端，我将使用Java Spring。

<details>
<summary>英文:</summary>

I want to make an image like a checkbox. (I.e. The picture is a green chair icon. When you press it, it should turn from green to orange, and when pressed again, orange to green.)

The following code works partially, when you click on the green icon, it turns orange, but if I click again to go from orange to green, nothing happens and it stays orange again

The image:

![][1]
  

<table style="width:70%">
<tr>
<th>
<center>0</center>
<img src="images/chairgreen.png" id="1" style="width:64px;height:64px;" onclick="if (src='images/chairgreen.png') { this.src='images/chairorange.png' } else if (src='images/chairorange.png') { this.src='images/chairgreen.png'}" >
</th>
</tr>

The problem is the `onclick` method but I don't know how to fix it. And I also don't know how to send the id and the color of the chair to the backend. For the backend I will use java spring.

  [1]: https://i.stack.imgur.com/7jVmM.png

</details>


# 答案1
**得分**: 1

你可以尝试将类名定义为图像的颜色。然后，你可以根据类名更改src属性。不要忘记在每次点击时更改类名。

```javascript
function changeImg(img){
    if(img.classList.contains("green")){
        img.setAttribute("src","images/chairorange.png");
        img.classList.remove("green");
        img.classList.add("orange");
    } 
    else if(img.classList.contains("orange")){
        img.setAttribute("src","images/chairgreen.png");
        img.classList.remove("orange");
        img.classList.add("green");
    }
}

<img src="images/chairgreen.png" id="1" class="green"  style="width:64px;height:64px;" onclick="changeImg(this)">

function changeImg(img){
if(img.classList.contains("green")){
img.setAttribute("src","images/chairorange.png");
img.classList.remove("green");
img.classList.add("orange");
} 
else if(img.classList.contains("orange")){
img.setAttribute("src","images/chairgreen.png");
img.classList.remove("orange");
img.classList.add("green");
}
}

<img src="images/chairgreen.png" id="1" class="green"  style="width:64px;height:64px;" onclick="changeImg(this)">

答案2

得分: 0

不要在附加点击处理程序时定义函数并运行多个语句。
如果您有一个复杂的操作，编写一个函数，然后触发该函数。

<img src="images/chairgreen.png" id="1" data-src="green" style="width:64px;height:64px;" onclick="change();" >

<script>
function change(e) {
    const target = e.target;
    const current = target.getAttribute('data-src');
    switch(current) {
        case "green":
            target.src = "images/chairorange.png";
            target.setAttribute('data-src', "orange");
            break;
        case "orange":
            target.src = "images/chairgreen.png";
            target.setAttribute('data-src', "green");
            break;
        default:
            console.error("error", e, current);
            break;
    } 
}
</script>

但是，如果您在脚本标记中编写代码，最好也在 JavaScript 中生成按钮：

const img = document.createElement('img');
img.setAttribute('src', "images/chairgreen.png")
img.setAttribute('id', "1") // 使用迭代器
img.setAttribute('data-src', "green");
img.style.height = "64px";
img.style.width = "64px";
img.addEventListener('click', change);

如果通过 JavaScript 生成元素，您还需要将其附加到 DOM 中：

const body = document.querySelector('body');
body.appendChild(img);

注意：上述内容是您提供的代码段的翻译，没有进行逐字翻译。

<img src="images/chairgreen.png" id="1"  data-src="green" style="width:64px;height:64px;" onclick="change();" >

<script>
function change(e){
    const target = e.target;
    const current = target.getAttribute('data-src');
    switch(current){
      case "green":
        target.src= "images/chairorange.png";
        target.setAttribute('data-src',"orange");
          break;
        case "orange":
        target.src= "images/chairgreen.png";
        target.setAttribute('data-src',"green");
          break;
        default:
          console.error("error", e, current);
            break;
    } 
}

</script>

const img = document.createElement('img');
  img.setAttribute('src', "images/chairgreen.png")
  img.setAttribute('id', "1") // use an iterator
  img.setAttribute('data-src', "green");
  img.style.height ="64px";
  img.style.width = "64px";
  img.addEventListener('click', change);

const body = document.querySelector('body');
body.appendChild(img);

答案3

得分: 0

你正在使用只有一个等号的 if 比较，你至少需要两个等号来进行比较。

onclick="this.src = (this.src == 'images/chairgreen.png') ? 'images/chairorange.png' : 'images/chairgreen.png'"

onclick="this.src = (this.src == 'images/chairgreen.png') ? 'images/chairorange.png' : 'images/chairgreen.png'"