Javascript 点击按钮更改 - Javascript onclick button change

   <img src="<?php echo $this->webroot; ?>img/yes.png" onclick="save(this);" id="btnyes" value="Yes"> &nbsp; 
     <img src="<?php echo $this->webroot; ?>img/no.png" id="btnno" onclick="save(this);" value="No">
       <img id="yes" style="display:none" src="<?php echo $this->webroot; ?>img/green.png"  alt="">
        <img id="no" style="display:none" src="<?php echo $this->webroot; ?>img/green.png"  alt="">

当我单击"是"按钮时，它应该变为绿色勾号，并且当我单击"没有"按钮时，它应该变为红色勾号

<script type="text/javascript">
function save(obj) {
  if(obj.value='yes'){
    document.getElementById('btnyes').style.display = 'none';
    document.getElementById('btnno').style.display = 'none';
    document.getElementById('yes').style.display = 'block';
    document.getElementById('no').style.display = 'none';
  } 
  else if {
    document.getElementById('btnyes').style.display = 'none';
    document.getElementById('btnno').style.display = 'none';
    document.getElementById('yes').style.display = 'none';
    document.getElementById('no').style.display = 'block';
  }
}
</script>

这个函数的脚本在上面，但是当我点击这两个按钮中的任何一个时，没有变化发生。错误是什么？

文件中有几个错误：

这是你的 html：

 <img onclick="save(this);" id="btnyes" value="Yes">

这是你的JS：

if(obj.value='yes'){
document.getElementById('btnyes').style.display = 'none';
document.getElementById('btnno').style.display = 'none';
document.getElementById('yes').style.display = 'block';
document.getElementById('no').style.display = 'none';
}

"是

">不等于"是"。此外，if(obj.value='yes') 没有检查 obj.value 的值。

下面的这个片段是错误的。您需要指定else if("condition")或将其更改为 else 。

else if{
document.getElementById('btnyes').style.display = 'none';
document.getElementById('btnno').style.display = 'none';
document.getElementById('yes').style.display = 'none';
document.getElementById('no').style.display = 'block';
}

只有输入元素才具有值属性。但是您在图像中使用了值，因此您可以使用：

if(obj.getAttribute('value')=='yes'){//compare with == not with =

建议：

请使用 html5 data-* 属性。例如。 data-value="yes"，然后使用 getAttribute('data-value') .

演示

首先，在 else if 条件附近，javascript 代码中存在语法错误。

其次，不能对图像使用"值"属性。

第三，你使用"="进行比较，而它应该是"==">

最后，您将"是"与"是"进行比较。因此，区分大小写，比较失败。

我已经对您的代码进行了通用更改。请尝试一下，看看您是否收到正确的警报。然后，您可以根据需要在其中添加代码。

<script language="javascript">
function save(obj){

if(obj.getAttribute("value") =='Yes'){
 alert("I am in Yes");
 } 
 else {
   alert("I am in No");
     }
}
</script>

希望对您有所帮助！

你有很多

事情需要纠正。

首先，它obj.value == 'yes'不obj.value='yes'

其次，您应该使用 obj.getAttribute('value') 而不是 obj.value 。

第三，在你的代码中，你使用<?php echo $this->webroot; ?>img/green.png两次。但似乎您应该第二次使用<?php echo $this->webroot; ?>img/red.png。

整个代码看起来像;

.HTML

<img src="<?php echo $this->webroot; ?>img/yes.png" onclick="save(this);" id="btnyes" value="yes"/> &nbsp; 
<img src="<?php echo $this->webroot; ?>img/no.png" onclick="save(this);" id="btnno" value="no"/> 
<img id="yes" style="display:none" src="<?php echo $this->webroot; ?>img/green.png"  alt="">
<img id="no" style="display:none" src="<?php echo $this->webroot; ?>img/red.png"  alt="">

JavaScript

function save(obj){
  if(obj.getAttribute('value')=='yes'){
    document.getElementById('btnyes').style.display = 'none';
    document.getElementById('btnno').style.display = 'none';
    document.getElementById('no').style.display = 'none';
    document.getElementById('yes').style.display = 'block';
  } else{
    document.getElementById('btnyes').style.display = 'none';
    document.getElementById('btnno').style.display = 'none';
    document.getElementById('yes').style.display = 'none';
    document.getElementById('no').style.display = 'block';
  }
}

这是一个工作演示 https://jsfiddle.net/sa215dv0/1/

希望这有帮助