기존 버튼의 기능과 텍스트를 토글하는 단일 버튼으로 병합하려는 두 개의 작동 버튼이 있습니다. 기존 버튼은 다음과 같습니다.
<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>지금까지 자바 스크립트를 사용하여 텍스트를 변경할 수 있었지만 함수를 올바르게 호출하고 토글하는 방법을 알 수 없습니다. 내가 가진 것은 다음과 같습니다.
// 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" />나는 정말로 기본적인 것을 놓치고 있고 어떤 도움을 정말로 고맙게 생각합니다. 감사!
다음 코드가 잘 작동한다는 것을 알았습니다. layer3에 대한 ID를 올바르게 설정했는지 확인하십시오 . 또한 조치 var를 선언했는지 확인하십시오 .
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>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다