показать содержимое не определено

Question

Я пытаюсь реализовать шоу более & показать меньше. При выполнении этого кода я получаю и ошибка «Показывать контент не определен» не может получить. Что мне не хватает?

<script type="text/javascript" language="JavaScript"> 
    function HideContent(hide) { 
     document.getElementById("hide").style.display = "none"; 
    } 
    function ShowContent(show) { 
     document.getElementById("hide").style.display = "list-item"; 
    } 
    function ReverseDisplay(hide) { 
     if (document.getElementById("hide").style.display == "none") { document.getElementById(d).style.display = "block"; } 
     else { document.getElementById(d).style.display = "none"; } 
    } 
    </script> 

    heading<br/> 
    <a href="javascript:ShowContent(show)" > 
    Show 
    </a> 
    <div id="hide" style="display:none;"> 
    <p>content goes here</p> 
    <a href="javascript:HideContent(hide)"> 
    hide 
    </a> 
    </div> 

Answer 1

Переменные вы передаете в функцию, show и hide не определены. Кроме того, onclick лучше всего работает на JavaScript.

<a href="#" onclick="ShowContent()" > 

Updated Fiddle

Я не рекомендую использовать встроенный код и поставит все в теге сценария

<script> 
    window.onload = function() { 
     document.querySelector('#showContent').onclick = function() { 
      ShowContent(); 
     } 
    }; 
</script> 

<a id="showContent" href="#">Show</a> 

Answer 2

Вы не должны использовать встроенный JavaScript, потому как код чешуи, она становится меньше и менее обслуживаемым. Вместо этого вы должны использовать методы DOM API для выбора элемента и использовать метод .addEventListener для назначения функции прослушивателя событий.

Однако причина, по которой вы получаете эту ошибку, состоит в том, что вы используете переменные в JavaScript, которые не были определены. Это вызывает ошибку и останавливает скрипт, а это означает, что ShowContent и HideContent не будут инициализированы, поэтому, когда вы пытаетесь использовать эти функции, они не будут существовать, вызывая ошибку.

var hidd = document.getElementById("hidden"); 
 
var hide = document.getElementById("hide"); 
 
var show = document.getElementById("show"); 
 

 
show.addEventListener('click', function(){ 
 
    hidd.style.display = ''; 
 
    show.style.display = 'none'; 
 
}, false); 
 

 
hide.addEventListener('click', function(){ 
 
    hidd.style.display = 'none'; 
 
    show.style.display = ''; 
 
}, false);

<a id="show" href="#">Show</a> 
 
<div id="hidden" style="display:none;"> 
 
    <a id="hide" href="#">hide</a> 
 
    <p>content goes here</p> 
 
</div>