在鉻合金中無法正常工作

第一個按鈕onclick有效，但當onclick設置爲stopChrono()而不是chrono()時，stopChrono()不起作用。這隻發生在Chrome上，因爲在Mozilla和Edge中，它完美地工作。在鉻合金中無法正常工作

這是網頁的代碼： https://jsbin.com/mononohute/edit?html,js,output

P.S：這篇文章是不一樣的其他「的onClick不會在Chrome中工作」，因爲circunstances是完全diferent。

來源

2016-07-06 Alexis Q.D

5個錯誤。第68行：缺少分號。第70行：缺少分號。第72行：缺少分號。 74行：缺少分號。第75行：缺少分號。 – PaulH

如果你修復了這些錯誤，沒有任何反應，chrome不會加載onclick。 @PaulH –

我重構了click事件處理函數。

$('#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') 
    } 
});

它現在。我刪除了HTML的onclick處理程序，因爲否則chrono()發射兩次。報道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>

來源

2016-07-06 22:54:17 PaulH

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);

一旦計時開始後，我刪除了「click」事件監聽器，因爲下一個點擊不應該開始計時。我還添加了stopChrono'click'事件監聽器，因爲它應該停止計時。

stopChrono()反過來：'click'偵聽器與stopChrono斷開連接，並重新連接到startChrono。

現在你應該能夠來回走動。

來源

2016-07-06 22:33:13 AJFarkas

謝謝你的回答。只是該函數被稱爲'startC ** h ** rno'，並且文本沒有正確地進行滾動。無論如何，[這裏]（https://jsbin.com/curasidino/edit?js,output）你可以看到更正的代碼。 –

在鉻合金中無法正常工作

回答

相關問題