Helpmij.nl
Helpmij.nl
Helpmij.nl
Steun Helpmij.nl! Klik hier     Computerprobleem? Klik hier!

Quote

Weergeven resultaten 1 tot 13 van 13

Onderwerp: innerhtml

  1. #1
    Senior Member
    Geregistreerd
    29 april 2016
    Vraag is niet opgelost

    innerhtml

    Hallo,
    Ik gebruik wat javascript om een tekst van op de server op een webpagina te tonen.
    Hieronder een vereenvoudigde voorstelling:

    In de .js file haal ik de tekst op (zit in map op server) met ajax.
    Daar maak ik vervolgens een array van zodat iedere zin afzonderlijk staat.

    Code:
    function fnHandleText(FileText) {
        var TextArray = FileText.split(/\r?\n/g);
        for (i = 0; i < TextArray.length; i++) {
        document.getElementById("zin" + (i + 1)).innerHTML = TextArray[i];
        }
      }
    In de html pagina zet ik alle zinnen onder elkaar met:

    HTML Code:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    <script>
            var TextFileName = localStorage.getItem("Tekstpad");
     </script>
     
    <h2 id="zin1"></h2>
    <h2 id="zin2"></h2>
    <h2 id="zin3"></h2>
    <h2 id="zin4"></h2>
    <h2 id="zin5"></h2>
    <h2 id="zin6"></h2>
    <!--... en zo verder...-->

    maar als de oorspronkelijke tekst korter dan het aantal h2 lijnen is, heb ik een aantal lege zinnen, niet zichtbaar maar wel aanwezig.
    Kan ik dit met innerhtml oplossen in het script?
    Bedankt om te helpen denken.

  2. #2
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Voorburg
    Afstand tot server
    ±160 km
    Kan je hiermee verder?
    Code:
    <div id="h2items">
      <!-- hier wil je elke h2 hebben -->
    </div>
    
    function fnHandleText(FileText) {
      var TextArray = FileText.split(/\r?\n/g);
      var h2items = ''; // nodig bij lege TextArray
      for (i = 0; i < TextArray.length; i++) {
        h2items = h2items + '<h2 id="zin' + (i + 1) + '"></h2>';
      }
      document.getElementById("h2items").innerHTML = h2items;
    }
    Suc6. Have fun.
    Voor bestaande- en nieuwe websites op smartphone, tablet en pc.

  3. #3
    Senior Member
    Geregistreerd
    29 april 2016
    Bedankt Bron, dit helpt me al wat. Maar als ik hier nu het kleur van de zinnen wil veranderen na een klik op de zin lukt het niet. Wat doe ik verkeerd?
    Code:
    var i;
    var TextFileName;
    var SpeechList = document.getElementsByClassName("speech");
    // na een click op class='speech'
    var fnSpeech = function () {
        responsiveVoice.speak(this.getAttribute('data-speech-text'), "Dutch" + "Female");
        this.setAttribute("class", "speech isplaying");
        event.preventDefault();
    };
    
    for (i = 0; i < SpeechList.length; i++) {
        SpeechList[i].setAttribute("class", "speech beforeplay");
        SpeechList[i].addEventListener("touchend", fnSpeech, false);
        SpeechList[i].addEventListener("click", fnSpeech, false);
    }
    
    function fnHandleText(FileText) {
        var TextArray = FileText.split(/\r?\n/g);
        var h2items = ''; // nodig bij lege TextArray
    
        for (var i = 0; i < TextArray.length; i++) {
            h2items = h2items + '<h2 class="speech" id="zin' + (i) + '"></h2>';// opbouw tekst
        }
        document.getElementById("h2items").innerHTML = h2items;// toon tekst
    
        for (var i2 = 0; i2 < TextArray.length; i2++) {
            document.getElementById("zin" + (i2)).innerHTML = TextArray[i2];
            document.getElementById("zin" + (i2)).setAttribute('data-speech-text', TextArray[i2]);
        }
    
    }
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200) {
            fnHandleText(this.responseText);
        }
    };
    xhttp.open("GET", TextFileName, true);
    xhttp.send();
    // na het spreken van een tekst
    function voiceEndCallback() {
        for (i = 0; i < SpeechList.length; i++) {
            if (SpeechList[i].getAttribute("class").indexOf("isplaying") > -1) {
                SpeechList[i].setAttribute("class", "speech afterplay");
            }
        }
    }

  4. #4
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Voorburg
    Afstand tot server
    ±160 km
    Klik op gele zin, kleur verandert in groen én blijft groen, blijft ook groen als op andere zin wordt geklikt
    (vraag: hoe wordt de zin weer geel?)

    of klik op gele zin, kleur verandert in groen maar wordt weer geel als op andere zin wordt geklikt.
    Voor bestaande- en nieuwe websites op smartphone, tablet en pc.

  5. #5
    Senior Member
    Geregistreerd
    29 april 2016
    Alle zinnen zijn oorspronkelijk rood.
    Klik op zin en ze wordt geel (terwijl tekst uitgesproken wordt)
    Na uitspreken zin wordt ze groen.
    Nog eens klikken op een groene zin: terug geel (terwijl 'spraak') en dan groen.

  6. #6
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Voorburg
    Afstand tot server
    ±160 km
    Dat is een hoop werk. Je vraag hadden we dacht ik hier opgelost (klik)
    Voor bestaande- en nieuwe websites op smartphone, tablet en pc.

  7. #7
    Senior Member
    Geregistreerd
    29 april 2016
    Ja, dat klopt. Ondertussen heb ik dat al verder uitgewerkt tot een goed hulpmiddel voor de mensen met een verstandelijke beperking op mijn werk. Maar ik blijf zitten met de lange rijen:

    HTML Code:
    1
    2
    3
    4
    5
    
    <h2 class="speech" id="zin1"></h2>
    <h2 class="speech" id="zin2"></h2>
    <h2 class="speech" id="zin3"></h2>
    ...
    <h2 class="speech" id="zin100"></h2>
    voor teksten van minder dan 100 zinnen.

    Dit kan ik nu met jou for lus met h2items vereenvoudigen en beperken tot het exacte aantal zinnen dat ik nodig heb. Maar hoe krijg ik die veranderingen van de kleuren er bij. Ik dacht dat

    HTML Code:
    1
    
    <div id="h2items"></div>

    gewoon onderstaand rijtje verving en de opmaak en zo er even goed zou op werken.
    HTML Code:
    1
    2
    3
    4
    5
    
    <h2 class="speech" id="zin1"></h2>
    <h2 class="speech" id="zin2"></h2>
    <h2 class="speech" id="zin3"></h2>
    ...
    <h2 class="speech" id="zin100"></h2>

  8. #8
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Voorburg
    Afstand tot server
    ±160 km
    een goed hulpmiddel voor de mensen met een verstandelijke beperking op mijn werk
    Goed bezig

    In berichtje #1 gaf je geen class="speech", mogelijk is dat de reden waarom het niet werkt.
    Als je de class erbij zet dan staat het volgende in de loop.
    Code:
      for (i = 0; i < TextArray.length; i++) {
        h2items = h2items + '<h2 class="speech" id="zin' + (i + 1) + '"></h2>';
      }
    En het klopt dat je alle <h2> regels kan vervangen door alleen
    Code:
      <div id="h2items"></div>
    Voor bestaande- en nieuwe websites op smartphone, tablet en pc.

  9. #9
    Senior Member
    Geregistreerd
    29 april 2016
    In #3 had ik die class="speech" er al in gezet zoals je nu voorstelt maar ik blijf naakte tekst krijgen.
    Ik vermoed dat het met de volgorde van de functies in het script te maken heeft.

  10. #10
    Senior Member
    Geregistreerd
    29 april 2016
    ondertussen opgelost.
    De volgorde van de functions was niet goed.
    Bedankt Bron

  11. #11
    Senior Member
    Geregistreerd
    29 april 2016
    Ik heb hierbij toch nog een vraagje. Na wat zoeken naar info over "innerhtml" las ik hier en daar dat "textContent" beter/ veiliger is.
    Is dat zo en hoe gebruik je dit dan?

  12. #12
    Moderator bron's avatar
    Geregistreerd
    13 augustus 2013
    Locatie
    Voorburg
    Afstand tot server
    ±160 km
    Je kan niet spreken over beter of slechter of wel veilig of niet veilig. Het gaat erom waarvoor het wordt gebruikt en wat het meesst handig is. Bij het inlezen van formuliervelden wordt idd meestal innerText (meest veilig) of textContent (iets minder veilig) gebruikt omdat ze de html uit de tekst filteren. Noot: innerText werkt niet bij alle wat oudere browsers, textContent wel. In alle andere gevallen kan je gewoon kiezen welke op dat moment het meest handig is, dus innerHTML kan je gewoon gebruiken. Voorbeeld:
    Code:
    <style>
    .hide { display: none; }
    </style>
    
    <div id="demo">
    <p>Het is <span class="hide">geen</span> onzin in een <script>var x=12</script> code.</p>
    </div>
    
    <script>
    var demoDiv = document.getElementById("demo");
    alert(demoDiv.innerHTML);
    alert(demoDiv.textContent);
    alert(demoDiv.innerText);
    </script>
    Resultaat:

    .innerHTML (alle html, tekst, enz.) met als resultaat:
    <p>Het is <span class="hide">geen</span> onzin in een <script>var x=12</script> code.</p>

    .textContent (tekst) met als resultaat:
    Het is geen onzin in een var x=12 code.

    .innerText (tekst excl inhoud van <script>, <style> of door css verborgen tekst) met als resultaat:
    Het is onzin in een code.
    Laatst aangepast door bron : 17 januari 2019 om 21:45
    Voor bestaande- en nieuwe websites op smartphone, tablet en pc.

  13. #13
    Senior Member
    Geregistreerd
    29 april 2016
    Bedankt voor de heldere uitleg. Weer wat bijgeleerd. Dan blijf ik hiervoor innerhtml gebruiken.

Berichtenregels

  • U mag geen nieuwe vragen starten.
  • U mag niet reageren op berichten.
  • U mag geen bijlagen versturen.
  • U mag uw berichten niet bewerken.
  •  
Helpmij.nl
Helpmij.nl

Helpmij.nl en business

Partners
Sponsoren