basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    <div class="prehelp"><pre class="html_code"><i onclick="myFunction(this)" class="fa fa-thumbs-up"></i> <script> function myFunction(x) { x.classList.toggle("fa-thumbs-down"); } </script></pre></div> Obiger Code funktioniert leider nur bedingt. Klicke ich auf das Icon, verändert es sich auch, wie es soll (Daumen rauf wird zu Daumen runter). Komischerweise kann ich die Klasse aber nicht ändern. Wenn ich z.B. im HTML-Code aus class="fa fa-thumbs-up" -> class="fa fa-thumbs-down" mache und entsprechend im javascript-code aus x.classList.toggle("fa-thumbs-down"); -> x.classList.toggle("fa-thumbs-up"); mache, geht das Togglen nicht mehr. Wo liegt hier der Fehler?

    Code

                                        
                                    <html>
      <head>
     <script src="/js_webseite/jquery.js"></script>
        <style>
          i{
      width:100px;
      height:100px;
      display:block;
      border:1px solid red;
      margin:0 auto;
      overflow:hidden;
    }
    i.fa-thumbs-down:before{
      display:block;
      height:100px;
      width:100px;
      line-height:80px;
      font-size:34px;
      background:green;
      color:white;
      content:'HOCH';
    }
    
    .fa-thumbs-up:before{
      display:block;
      height:100px;
      width:100px;
      font-size:33px;
      line-height:80px;
      content:'Runter';
      background:blue;
      color:white;
    }
    
    h2{
      text-align:center;
    }
        </style>
      </head>
      <body>
    <h2>Mit add und remove class</h2>
    <i onclick="myFunction(this)" class="fa fa-thumbs-up"></i>
    <h2>Mit repleace class</h2>
    <i onclick="myFunction1(this)" class="fa fa-thumbs-up"></i>
    <script>
    function myFunction(x) {
      if(x.classList.contains('fa-thumbs-up')){
         x.classList.remove("fa-thumbs-up");
         x.classList.add("fa-thumbs-down");
      }else{
         x.classList.remove("fa-thumbs-down");
         x.classList.add("fa-thumbs-up");
      }
    }
     
    function myFunction1(x) {
      if(x.classList.contains('fa-thumbs-up')){
         x.classList.replace("fa-thumbs-up","fa-thumbs-down");
      }else{
         x.classList.replace("fa-thumbs-down","fa-thumbs-up");
      }
    }
    </script>
      </body>
    </html>