innerhtml

Status
Niet open voor verdere reacties.

backnext

Gebruiker
Lid geworden
29 apr 2016
Berichten
176
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:
<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.
 
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.
 
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");
        }
    }
}
 
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.
 
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.
 
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:
<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:
 <div id="h2items"></div>

gewoon onderstaand rijtje verving en de opmaak en zo er even goed zou op werken.
HTML:
<h2 class="speech" id="zin1"></h2>
<h2 class="speech" id="zin2"></h2>
<h2 class="speech" id="zin3"></h2>
...
<h2 class="speech" id="zin100"></h2>
 
een goed hulpmiddel voor de mensen met een verstandelijke beperking op mijn werk
Goed bezig :thumb:

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>
 
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.
 
ondertussen opgelost.
De volgorde van de functions was niet goed.
Bedankt Bron
 
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?
 
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 bewerkt:
Bedankt voor de heldere uitleg. Weer wat bijgeleerd. Dan blijf ik hiervoor innerhtml gebruiken.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan