Javascript onclick button change

Question

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

obj.value=='yes' not obj.value='yes'

Arun P Johny
– Arun P Johny

2015-12-18 05:58:13 +00:00
Commented Dec 18, 2015 at 5:58 — Arun P Johny
– Arun P Johny, Commented Dec 18, 2015 at 5:58
no change still same pb

user
– user

2015-12-18 05:59:54 +00:00
Commented Dec 18, 2015 at 5:59 — user
– user, Commented Dec 18, 2015 at 5:59

Nicholas F · Accepted Answer · 2015-12-18 06:19:16Z

1

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

answered Dec 18, 2015 at 6:19

Nicholas F

1414 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user Over a year ago

what should i do to change in all rows?

Nicholas F Over a year ago

Have you modified your code? If so, what does it look like now? Also, what do you mean by rows ? What exactly are you seeing when you click on one of the buttons?

Bhojendra Rauniyar · Accepted Answer · 2015-12-18 06:10:58Z

0

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

edited Dec 18, 2015 at 6:10

answered Dec 18, 2015 at 5:59

Bhojendra Rauniyar

86.1k36 gold badges179 silver badges241 bronze badges

3 Comments

Bhojendra Rauniyar Over a year ago

You may need if(obj.getAttribute('data-value').toLowerCase()=='yes'){

user Over a year ago

Let us continue this discussion in chat.

Bhojendra Rauniyar Over a year ago

in demo? its alerting 'yes'

Aman Sura · Accepted Answer · 2015-12-18 06:45:42Z

0

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!

answered Dec 18, 2015 at 6:45

Aman Sura

2561 silver badge7 bronze badges

Comments

Alfred · Accepted Answer · 2015-12-18 06:48:49Z

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

Collectives™ on Stack Overflow

Javascript onclick button change

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related