按钮具有不同的功能，第二次点击并更改文字

我有两个工作按钮，我想合并成一个按钮来切换现有按钮的功能和文本。现有的按钮：按钮具有不同的功能，第二次点击并更改文字

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

我敢肯定，我错过了真正的基本&真的很感激任何帮助的东西。谢谢！

来源

2015-04-05 D.fo

你在使用jQuery吗？我发现你已经使用了$文档。我想如果你使用文档，那么它应该工作。我的意思是document.getElementById（'layer3'） – Sohel 2015-04-05 18:06:23

我有jQuery链接。我试着根据你的建议使用文档，但这似乎也没有工作。 – 2015-04-05 20:54:43

我发现下面的代码工作正常。请检查您是否已为layer3正确设置了ID。另请检查您是否已宣布动作变种。

有一个更好的方法来做到这一点，因为你正在使用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>

来源

2015-04-05 21:24:42 Sohel

谢谢Sohel！ – 2015-04-05 21:57:57

按钮具有不同的功能，第二次点击并更改文字

回答

相关问题