按鈕具有不同的功能，第二次點擊並更改文字

我有兩個工作按鈕，我想合併成一個按鈕來切換現有按鈕的功能和文本。現有的按鈕：按鈕具有不同的功能，第二次點擊並更改文字

<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

按鈕具有不同的功能，第二次點擊並更改文字

回答

相關問題