첫 번째 버튼 onclick이 작동하지만 chrono() 대신 stopChrono()으로 설정하면 stopChrono()이 작동하지 않습니다. 모질라와 엣지에서 완벽하게 작동하기 때문에 크롬에서만 발생합니다. https://jsbin.com/mononohute/edit?html,js,output크롬에서 onclick이 제대로 작동하지 않음
P.S :
이
는 웹의 코드입니다 circunstances 완전히 개의 다른이기 때문에, 다른 하나는 "onclick을 크롬에서 작동하지 않습니다"로이 포스팅은 동일하지 않습니다.클릭 이벤트 처리기를 재구성했습니다. 원래는이 동안
$('#start').on('click', function(e) {
$(this).attr('value', function(_, text) {
if (text === 'Stop!') {
$(this).attr('class', 'w3-btn w3-green');
stopChrono();
return 'Start!';
} else {
$(this).attr('class', 'w3-btn w3-red');
chrono();
return 'Stop!';
}
});
});
는 :
$('#start').on('click', function(e) {
$(this).attr('value', function(_, text) {
$(this).attr("class", "w3-btn w3-red")
return text === 'Stop!' ? 'Start!' : 'Stop!';
})
if ($(this).attr('onclick') == 'chrono()') {
$(this).attr('onclick', 'stopChrono()')
} else {
$(this).attr('onclick', 'chrono()')
$(this).attr('class', 'w3-btn w3-green')
}
});
그것은 작동합니다. else chrono() 두 번 발생했기 때문에 html onclick 처리기를 제거했습니다.
var start = document.getElementById('start'),
reset = document.getElementById('reset'),
counter = document.getElementById('counter'),
sCounter = 0,
mCounter = 0,
hCounter = 0,
displayChrono = function() {
if (sCounter < 10) {
sCounter = "0" + sCounter;
}
if (mCounter < 10) {
mCounter = "0" + mCounter;
}
if (hCounter < 10) {
hCounter = "0" + hCounter;
}
counter.value = hCounter + ":" + mCounter + ":" + sCounter;
},
chronometer,
openchrono = document.getElementById('openchrono'),
chronowinin = document.getElementById('chronowinin');
function chrono() {
chronometer = setInterval(function() {
mCounter = +mCounter;
hCounter = +hCounter;
sCounter = +sCounter;
sCounter++;
if (sCounter == 60) {
mCounter++;
sCounter = 0;
}
displayChrono();
}, 1000);
}
function resetChrono() {
sCounter = 0;
mCounter = 0;
hCounter = 0;
displayChrono();
}
function stopChrono() {
clearInterval(chronometer);
}
$('#openchrono').click(function() {
if ($(this).attr('value') == '+') {
$(this).attr('value', '-');
$('#chronowinin').slideDown();
} else {
$(this).attr('value', '+');
$('#chronowinin').slideUp();
}
});
$('#start').on('click', function(e) {
$(this).attr('value', function(_, text) {
if (text === 'Stop!') {
$(this).attr('class', 'w3-btn w3-green');
stopChrono();
return 'Start!';
} else {
$(this).attr("class", "w3-btn w3-red");
chrono();
return 'Stop!';
}
});
});
//
// $('#start').click(function() {
// if ($(this).attr('value') == 'Start!') {
// $(this).attr('value', 'Stop!');
// $(this).attr('class', 'w3-btn w3-red')
// $('#start').click(stopChrono());
// }});
//else {
// $(this).attr('value', 'Start!');
// $(this).attr('class', 'w3-btn w3-green');
// $('#start').click(stopChrono()
// // function() {
// // function stopChrono() {
// // clearInterval(chronometer);
// // }
// //}
// );
// }});
//
//
// openchrono.addEventListener("click", function() {
// chronowinin.className = "w3-container w3-row";
// openchrono.innerHTML = "-";
// openchrono.id = "closechrono"
//
// closechrono.addEventListener("click", function() {
// var closechrono = document.getElementById('closechrono');
// chronowinin.className = "w3-container w3-row hidden";
// openchrono.innerHTML = "+";
// closechrono.id = "openchrono"
// });
// });
//)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Everything - everything you'll want is here.</title>
</head>
<body>
<div class="w3-row w3-container">
<div class="w3-col m3 w3-text-red">
<p></p>
</div>
<div class="w3-col m6 w3-center w3-text-white w3-xxlarge">
<p>
<i>Everything you want is here.</i>
</p>
</div>
<div class="w3-col m3 w3-text-red">
<p></p>
</div>
</div>
<div id="chronowin" class="w3-container w3-row">
<div class="w3-col m3 w3-text-red">
<p></p>
</div>
<div class="w3-col m6 w3-center w3-xlarge w3-white w3-text-red showhover">
<p>
Chronometer
<input type="button" value="+" id="openchrono" class="w3-btn-floating w3-red" style="right:5%; float:right; border:none"></input>
</p>
</div>
<div class="w3-col m3 w3-text-red">
<p></p>
</div>
</div>
<div id="chronowinin" class="w3-container w3-row" style="display: none">
<div class="w3-col m3 w3-text-red">
<p></p>
</div>
<div class="w3-col s 12 m6 w3-center w3-white w3-text-grey">
<p></p>
<input id="counter" type="text" name="name" value="00:00:00" readonly="readonly" class="w3-text-grey w3-center">
<br>
<p></p>
<input id="start" type="button" name="name" value="Start!" class="w3-btn w3-green">
<!-- <input type="button" name="name" value="Stop!" class="w3-btn w3-red" onclick="stopChrono()"> -->
<input id="reset" type="button" name="name" value="Reset!" class="w3-btn w3-blue" onclick="resetChrono()">
<p></p>
</div>
<div class="w3-col m3 w3-text-red">
<p></p>
</div>
</div>
<script src="js/jquery.js" charset="utf-8"></script>
<script src="js/chronometer.js" charset="utf-8"></script>
</body>
</html>는 jQuery를 편리하게 이벤트 리스너를 저장, 그래서 당신은 별도의 기능에서 그들을 정의하는 경우, 당신은 쉽게 제거 할 수 있습니다 :
크로노가 시작되면, 나는 '클릭'이벤트 리스너를 제거function stopChrono() {
clearInterval(chronometer);
$(this).attr('class', 'w3-btn w3-green')
$('#start').off('click', stopChrono)
$('#start').on('click', startChrono)
}
function startChrono(e) {
$(this).attr('value', function (_, text) {
$(this).attr("class", "w3-btn w3-red")
return text === 'Stop!' ? 'Start!' : 'Stop!';
})
$('#start').off('click', startChrono)
$('#start').on('click', stopChrono)
}
$('#start').on('click', startCrono);
다음 클릭 때문에 크로노를 시작하면 안된다. 또한 stopChrono 'click'이벤트 리스너를 추가 했으므로 chrono를 중지해야합니다.
반대의 경우는 stopChrono()입니다. '클릭'수신기는 stopChrono에서 연결 해제되고 startChrono에 다시 연결됩니다.
이제 앞뒤로 이동할 수 있어야합니다.
답변 해 주셔서 감사합니다. 이 함수는'startC ** h ** rno'라고 불리며, 텍스트는 제대로 toogle이 아니 었습니다. 어쨌든 [여기] (https://jsbin.com/curasidino/edit?js,output) 수정 된 코드를 볼 수 있습니다. –
5 오류가 jsbin에보고했다. 줄 68 : 누락 된 세미콜론. 줄 70 : 누락 된 세미콜론. 줄 72 : 누락 된 세미콜론. 줄 74 : 누락 된 세미콜론. 줄 75 : 누락 된 세미콜론. – PaulH
이러한 오류를 수정해도 아무런 반응이 없으며 크롬에서 onclick을로드하지 않습니다. @PaulH –