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

Question

我有两个工作按钮，我想将它们合并为一个按钮，用于切换现有按钮的功能和文本。现有按钮是：

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

到目前为止，我已经能够使用 javascript 更改文本，但我不知道如何正确调用和切换函数。这是我得到的：

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

我确信我遗漏了一些非常基本的东西，非常感谢任何帮助。谢谢！

Answer 1

我发现以下代码工作正常。请检查您是否为 layer3 正确设置了 id。还要检查您是否已声明 action 变量。

在您使用 jQuery 时，有更好的方法可以做到这一点。但目前你可以试试下面的代码。

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

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

Button with different function on second click AND changes text

javascript

html

button

toggle