最初のボタンonclickが機能しますが、chrono()ではなくstopChrono()に設定すると、stopChrono()は機能しません。 MozillaとEdgeでは完全に動作するため、これはChromeでのみ発生します。クロムでonclickが正しく機能しない
これは、Webのコードです： https://jsbin.com/mononohute/edit?html,js,output
P.S：circunstancesは完全にdiferentているので、この記事は、他の「にOnclickはChromeで動作しません」と同じではありません。
クリックイベントハンドラを再構成しました。
$('#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()が2回発生したため、html onclickハンドラを削除しました。 jsbinで報告
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 'クリック'イベントリスナーを追加しました。
逆の場合はstopChrono()です。「クリック」リスナーはstopChronoから切断され、startChronoに再接続されます。
これで前後に行くことができるはずです。
お返事ありがとうございます。関数は 'startC ** h ** rno'と呼ばれ、テキストは適切にtoogleではないということだけです。とにかく[ここ]（https://jsbin.com/curasidino/edit?js,output）に修正されたコードが表示されます。 –
5エラー。 68行目：セミコロンがありません。 行70：セミコロンがありません。 行72：セミコロンがありません。 行74：セミコロンがありません。 行75：セミコロンがありません。 – PaulH
これらのエラーを修正しても、何も起こらず、クロムはonclickをロードしません。 @PaulH –