Question

I want to hide all the elements and children of the div-class "content-inside". I want to do this using JavaScript only, no JQuery etc...

Questions:

Is my JavaScript-code correct so far?
Is it valid to start own elements in HTML such as <description> instead of <p class="description">?
What am I doing wrong?

I tried messing around with the different ways to hide stuff:

document.getElementsByClassName("inside-parakomp-title").style.display = "none";
document.getElementsByClassName("inside-parakomp-title").style.visibility = "hidden";

Here is my Code so far:

/* Hide all content once at the beginning */
document.getElementsByClassName("inside-parakomp-title").style.visibility = "hidden";
document.getElementsByClassName("inside-parakomp").style.visibility = "hidden";
document.getElementsByClassName("content-inside").style.visibility = "hidden";

document.getElementsByClassName("inside-parakomp-title").style.display = "none";
document.getElementsByClassName("inside-parakomp").style.display = "none";
document.getElementsByClassName("content-inside").style.display = "none";

<div class="content">


  <h1>Linkliste zu den im Buch verwendeten Musikbeispielen</h1>
  <p>In dieser Liste sind zu jedem im Buch verwendeten Musikbeispiel der Kapitel 3–6 ein oder mehrere YouTube-Links angegeben, damit Sie sich schnell orientieren können.</p>
  <p>Eine Garantie für die dauerhafte Verfügbarkeit der Verlinkungen kann nicht übernommen werden. Sollte einer der Links nicht mehr aktuell sein, empfiehlt es sich, mithilfe der Stichwörter von Titel und Komponist nach Alternativen zu suchen.</p>
  <ol>
    <li class="list-h1">Rezeption in Verbindung mit Produktion
      <ol>
        <li class="list-h2">Eine Parakomposition erfinden
          <div class="content-inside">
            <p class="inside-parakomp-title" id=1.1>
              <authorname>Emil Waldteufel</authorname>
              <songname>Die Schlittschuhläufer</songname>
              <book-page>20</book-page>
            </p>
            <p class="inside-parakomp" id=1.1>
              <description>Das
                <interpret>Johann-Strauss-Orchester Wiebaden</interpret> unter der Leitung von Herbert Siebert hat eine Fassung von knapp 5 Minuten eingespielt, die wegen dieser Kürze für die Grundschule geeignet ist.</description>
            </p>
            <table class="inside-parakomp-link" id=1.1>
              <tr>
                <th rowspan="2"><img src="images/youtube.png" alt="youtube" width="100%"></th>
                <td>
                  <link href="https://youtu.be/bvjHWR8K04o">https://youtu.be/bvjHWR8K04o</link>
                </td>
              </tr>
              <tr>
                <td>
                  <link-checked>2019-03-04</link-checked>
                </td>
              </tr>
            </table>
            </p>
          </div>

        </li>
        <li class="list-h2">Eine Parakomposition erfinden</li>
        <li class="list-h2">Eine Parakomposition erfinden</li>
      </ol>
    </li>
    <li class="list-h1">Rezeption in Verbindung mit Produktion
      <ol>
        <li class="list-h2">Eine Parakomposition erfinden</li>
        <li class="list-h2">Eine Parakomposition erfinden</li>
        <li class="list-h2">Eine Parakomposition erfinden</li>
      </ol>
    </li>
    <li class="list-h1">Rezeption in Verbindung mit Produktion
      <ol>
        <li class="list-h2">Eine Parakomposition erfinden</li>
        <li class="list-h2">Eine Parakomposition erfinden</li>
        <li class="list-h2">Eine Parakomposition erfinden</li>
      </ol>
    </li>
  </ol>
</div>

Problem hiding HTML-elements with JavaScript

0 个答案: