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

Question

目前我有这个代码，它可以很好地改变文本和颜色，但如果用户决定不再需要产品，我需要它快速恢复原始颜色（蓝色）和原始文本。我已经包含了我认为可行的内容，有一个用户点击撤消选择的链接段落，如果点击它会恢复到原始状态。我的代码不起作用的任何建议和理由将不胜感激。

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;

}

}

这是HTML：

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

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

注意：这不是对问题的回答

我将在这里解释一些在代码中应该避免的不良做法：

你的功能应该做一件事，做得好

// Bad
changeMyButton()

// Good
activate()
deactivate()

尽可能避免全局变量并使用参数

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

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

不要根据标签值

测试按钮状态

以这种方式更改设计，措辞需要更新代码，如果您想在应用中支持其他语言会发生什么？使用css类或其他适当的方法来测试

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

使用CSS更改样式而不是JavaScript操作

所以可能的程序将是这样的

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

您操纵元素样式声明button3.style.background = "green";，它具有比任何id或类声明更高的特异性。

并将.更改为在CSS选择器中使用#：

.button3 { ...

}

应为#button3

Answer 3

您最大的问题是document.write("<p> Undo Selection </p>"); =＆gt;这将清除您的页面。第二个问题是错误代码=＆gt;点击时button4没有出现，所以什么都没做。 count变量什么都不做。此处未使用您的css button4。 +阅读@ Anima-t3d的答案

＆＃13;

＆＃13;

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

}

＆＃13;

.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

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

我是在jQuery的帮助下创建的。因此，如果您选择此解决方案，则需要jquery来获得预期结果。

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