想要一个按钮来更改颜色并在用户单击时更改文本

Question

Currently I have this code, which changes text and the colour well, but I require it to snap back to the original colour (blue) and original text if the user decide to not want the product anymore by pressing the Undo Selection. I have included what I may think would work, having a link paragraph that the user clicks to Undo Selection and if it is clicked it will revert to the original state. Any suggestions and reasons to why my code is not working would be greatly appreciated.

function changemyButton() 
{

var count = 1;
var elem = document.getElementById("button3");
if (elem.value=="Un-Select Package") elem.value = "Select This Package";
else elem.value = "Package Selected!";
var count = 0;

if (elem.value!=="Un-Select Package") {

    button3.style.background = "green";
    document.write("<p> Undo Selection </p>");

    var count= 1;

}

}

This is the HTML:

<input type='button' value='Select This Package' id='button3' onclick="changemyButton()">

This is the CSS :

.button3 {

background:#003e7e;
  text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3);
  font-size: 12px;
  height: 38px;
  width: 220px;
  margin: 50px 0 0 50px;
  overflow: hidden;
  display: block;
  text-align: center;
  line-height: 58px;
color: white;
  position:relative;

  bottom:55px;
  left: -20px;

  line-height: 1em;
padding: 0px;strong text

}

Answer 1

NOTE: THIS IS NOT AN ANSWER TO THE QUESTION

I will explain here some bad practices that should be avoided in code like in the question:

Your function should do one thing and do it well

// Bad
changeMyButton()

// Good
activate()
deactivate()

Avoid global variable as much as possible and use arguments instead

// Bad
changeMyButton() {  document.getElementById('btn1').style.color = '#eee';  }

// Good
activate(btn) {  btn.style....  }

Do not test the button state based on the label value

in that way changing the design, the wording requires updating your code, what happens if you want to support other languages in your app ? use a css class or another appropriate way to test

// in your method
function onSelect(btn){
    var isActive = btn.hasClass('active');        
    return isActive ? deactivate(btn) : activate(btn);
} 

Use CSS to change style instead of JavaScript manipulation

So a possible program will be like this

function onSelect(btn) {
   var isActive = btn.hasClass('active');
   return isActive ? deactivate(btn) : activate(btn);
}

function activate(btn) {
   btn.addClass('active');
   btn.value = 'Selected';
}

function deactivate(btn) {
   btn.removeClass('active');
   btn.value = 'Select';
}

Answer 2

You manipulate element style declaration button3.style.background = "green"; which has higher specificity than any id or class declaration.

And change . to use # in CSS selector:

.button3 { ...

}

It should be #button3

Answer 3

Your biggest problem is document.write("<p> Undo Selection </p>"); => this will clear your page. Second problem is incorrect code => button4 was not inited, so nothing done, when clicked. count variable does nothing. And your css button4 not used here. + read answer from @Anima-t3d

 function changemyButton() { var elem = document.getElementById("button3"); if (elem.value == "Un-Select Package") elem.value = "Select This Package"; else if( elem.value == "Package Selected!" ) { elem.value = "Select This Package"; elem.style.background = "red"; } else { elem.value = "Package Selected!"; elem.style.background = "green"; } } 

 .button4 { background:#003e7e; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.3); font-size: 12px; height: 38px; width: 220px; margin: 50px 0 0 50px; overflow: hidden; display: block; text-align: center; line-height: 58px; color: white; position:relative; bottom:55px; left: -20px; line-height: 1em; padding: 0px;strong text } 

 <input type='button' value='Select This Package' id='button3' onclick="changemyButton()"> 

Answer 4

I have created this with the help of jQuery. So if you choose this solution then you require jquery to get the expected results.

https://jsfiddle.net/d7dg8vsn/

$("#button").click(function(){
    $(this).val('Package Selected!');
  $(this).css({background: 'blue'});
  $('.undo').show();
});

$('.undo').click(function(){
    $('#button').val('Select This Package');
  $('#button').css({background: 'green'});
  $(this).hide();
});

\\

<input type='button' value='Select This Package' id='button' onclick="changemyButton()">
<a href="#" class="undo">
undo 
</a>

Answer 5

I think you should use jquery instead of lengthy javascript code.

jQuery will reduce your code also

https://jsfiddle.net/PunitSoniME/tqbyfxaL/1/

Check above fiddle link