Javascript innerHTML調用onclick函數

我試圖改變鏈接文本，當它被點擊並顯示一個DIV。用戶點擊修改後的鏈接（同一個鏈接）後，應該隱藏DIV。Javascript innerHTML調用onclick函數

它適用於顯示它，但由於某些原因，當我點擊「隱藏舊消息」時，DIV隱藏了半秒鐘，然後再次顯示。

它發生在哪裏，我改變了鏈接的文字默認的行（「查看舊的新聞......」）

<script>function showoldnews() 
     { 
      document.getElementById('oldnews').style.display = "block"; 
      document.getElementById('oldnewslinkid').innerHTML = '<a href="#" id="oldnewslinkid" onclick="hideoldnews(); return false;">Hide older news</a>'; 

     } 
     function hideoldnews() 
     { 
      document.getElementById('oldnewslinkid').innerHTML = '<a href="#" id="oldnewslinkid" onclick="showoldnews(); return false;">View older news...</a>'; //it calls showoldnews() function for some reason on this line 
      document.getElementById('oldnews').style.display = "none"; 
     } 
     </script>

鏈接

<a href="#" id="oldnewslinkid" onclick="showoldnews(); return false;">View older news...</a>

來源

2013-06-04 Krešimir Čulina

你如何定義鏈接？ – Ian

你能用你的標記和JS創建JSfiddle或者Codepen嗎？如果我們知道在js觸發之前DOM處於什麼狀態，那麼診斷事情會更容易。在相關說明中，我建議使用[事件偵聽器] https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener）而不是onClick事件。 –

您不想分配anchor元素的innerHTML，而是分配'outerHTML'。看看DOM檢查器，你最後得到嵌套鏈接... – Bergi

我相信這是因爲您在第一個鏈接中插入了第二個鏈接，並且點擊事件正在觸發父錨，而不是孩子。

您的標記：

<a href="#" id="oldnewslinkid" onclick="showoldnews(); return false;"> 
    <a href="#" id="oldnewslinkid" onclick="hideoldnews(); return false;">Hide older news</a> 
    </a>

周圍有這樣幾種方式：

裹在一個包含分區的控制，以及新的定位追加到其innerHTML
包括套在負載上控制dom，通過css隱藏您的hideOldNews()控件，並通過js切換它們

附加一個ñ事件監聽器一個元素，並用它來「切換」你的新聞DIV：

HTML

<div id="oldnews">Old News...</div> 
<a href="oldnews" id="toggle">View older news...</a>

var toggle = document.getElementById('toggle') 

toggle.addEventListener('click', function(e){ 
    e.preventDefault() 
    var target = document.getElementById("oldnews"); // href="oldnews" 
console.log(target); 

    target.style.display = (target.style.display == 'none') ? 'block' : 'none'; 

});

codepen

我的建議是使用事件處理程序，它會讓你的生活變得更簡單，因爲你不必編輯嵌套在HTML元素中的單行JS。 addEventListener存在一些輕微的跨瀏覽器問題（IE8使用特殊的attachEvent處理函數），有一些簡單的ways來解決這個問題。

來源

2013-06-04 20:43:01

好猜。你有什麼建議來解決這個問題？ – Bergi

我剛剛做了一個鏈接的副本，並將其放入隱藏的DIV中，給它一個不同的ID並將其值設置爲「隱藏較早的新聞」。然後，當顯示DIV時，原始的鏈接值被設置爲無。一旦隱藏舊的新聞鏈接被點擊，我只隱藏DIV並將第一個鏈接的值設置回默認值。謝謝！ –

@KrešimirČulina很高興聽到它爲你解決。我添加了一個基於「切換」的eventListener的更新解釋，僅用於踢腿。 –

Javascript innerHTML調用onclick函數

回答

相關問題