第二次单击时具有不同功能的按钮并更改文本

Question

I have two working buttons which I would like to merge into a single button that toggles the functions and text of the existing buttons. 我有两个工作按钮，我想合并为一个按钮，以切换现有按钮的功能和文本。 The existing buttons are: 现有的按钮是：

 <button type="button" onclick="document.getElementById('layer3').style.opacity = '0'"> HIDE SHAPE</button> <button type="button" onclick="document.getElementById('layer3').style.opacity = '100'"> SHOW SHAPE</button>

So far, I've been able to make the text change using javascript, but I can't figure out how to properly call and toggle the functions. 到目前为止，我已经能够使用javascript来更改文本，但是我不知道如何正确调用和切换功能。 Here's what I've got: 这是我得到的：

 // i'm trying to call two functions (toggleName and shapeOpacity here) document.getElementById('ShapeButton').onclick = function(){ toggleName(this, 'Hide Shape', "Show Shape"); shapeOpacity(); }; // the toggle name function (working) function toggleName(el, message1, message2) { if (!el || !message1 || !message2) { return false; } var text = el.tagName.toLowerCase() == 'input' ? el.value : (el.textContent || el.innerText), newText = text == message1 ? message2 : message1; if (el.tagName.toLowerCase() == 'input') { el.value = newText; } else { el.firstChild.nodeValue = newText; } } // the second click function (not working) function shapeOpacity() { if ( action == 1 ) { $document.getElementById('layer3').style.opacity = '0'; action = 2; } else { document.getElementById('layer3').style.opacity = '100'; action = 1; } }

 <input type=button value="Hide Shape" id= "ShapeButton" />

I'm sure I'm missing something really basic & really appreciate any help. 我确定我缺少真正的基本知识，也非常感谢任何帮助。 thanks! 谢谢！

Answer 1

I found the following code works fine. 我发现以下代码可以正常工作。 Please check that you have set the id correctly for layer3 . 请检查是否已正确设置layer3的ID。 Also check that you have declared the the action var. 还要检查您是否已声明动作 var。

There is a better way to do this as you are using jQuery. 使用jQuery时，有一种更好的方法。 But for the moment you can try the below code. 但是目前您可以尝试下面的代码。

<!DOCTYPE HTML>

<html>
<head>
  <title>Event Scheduler</title>
</head>
<body>
  <form name= "evtForm" method="post" onsubmit="Validate()">
    <input type=button value="Hide Shape" id= "ShapeButton" />
    <div id='layer3'> This is your layer 3 I guess</div>
  </form>

  <script>
    var action = 1; //make sure you declare this
    document.getElementById('ShapeButton').onclick = function(){
      toggleName(this, 'Hide Shape', "Show Shape"); shapeOpacity();
    };

    // the toggle name function (working)

    function toggleName(el, message1, message2) {
      if (!el || !message1 || !message2) {
      return false;
    }
    var text = el.tagName.toLowerCase() == 'input' ? el.value : (el.textContent || el.innerText),
        newText = text == message1 ? message2 : message1;

    if (el.tagName.toLowerCase() == 'input') {
      el.value = newText;
    }
    else {
      el.firstChild.nodeValue = newText;
    }
  }


   function shapeOpacity() {
     if ( action == 1 ) {
       document.getElementById('layer3').style.opacity = '0';
       action = 2;
     } else {
       document.getElementById('layer3').style.opacity = '100';
       action = 1;
     }
   }
  </script>
 </body>

</html>

第二次单击时具有不同功能的按钮并更改文本

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-04-05 21:24:42

第二次单击时具有不同功能的按钮并更改文本

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-04-05 21:24:42

解决方案1
0 已采纳 2015-04-05 21:24:42