CODEWITHSUNDEEP
javascriptphphtml
user
user

Reputation: 99

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="">

when i click on yes button it should change to green tick and when i click on no button it should change to red tick

<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>

The script for this function is above.but when i click on any of thesetwo buttons no change happens..What is the error?

Upvotes: 2

Views: 139

Answers (4)

Alfred
Alfred

Reputation: 21396

You have a lot of things to correct.

First, its obj.value == 'yes' not obj.value='yes'

Second, you should use obj.getAttribute('value') instead of obj.value.

Third, in your code, you are using <?php echo $this->webroot; ?>img/green.png two times. But it seems like you should use <?php echo $this->webroot; ?>img/red.png on the second time.

The whole code looks like;

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';
  }
}

Here is a working demo https://jsfiddle.net/sa215dv0/1/

Hope this helps

Upvotes: 0

Aman Sura
Aman Sura

Reputation: 256

First, there is a syntax error in your javascript code near the else if condition.

Second, you cannot use "value" attribute for images.

Third, you are comparing using a "=" whereas it shall be "=="

Last, you are comparing 'yes' with 'Yes'. So that being case sensitive, the comparison fails.

I have made generic changes to your code. Please try that and see if you get right alerts. And then you can add your code in it as you wish.

<script language="javascript">

function save(obj){


if(obj.getAttribute("value") =='Yes'){
 alert("I am in Yes");

 } 
 else {

   alert("I am in No");

     }
}

</script>

Hope that helps!

Upvotes: 0

Nicholas F
Nicholas F

Reputation: 141

You have a couple of errors in your file:

This is your html:

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

This is your 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';
}

"yes" does not equal "Yes". Also, if(obj.value='yes') is not checking for the value of obj.value.

This snippet below is wrong. You either need to specify else if("condition") or change it to 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';
}

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Only input elements have value attribute. But you are using value inside the image so you can use:

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

Recommendation:

Do use html5 data-* attribute. For eg. data-value="yes" and then use getAttribute('data-value').

demo

Upvotes: 0

Related Questions