Er was eens...

[hoornist]

Ik probeer een leuk sprookjesspelletje voor kinderen te maken.
Als de kinderen hun naam typen, dan verschijnt hun naam ook in diverse plaatsen in het sprookje.

Dit is wat ik tot nu toe heb:

<script type="text/javascript"> 
  function setnaam(naam) { 
    els = document.getElementsByTagName('span'); 
    for(i=0; i<els.length; i++) { 
        if(els[i].class == 'naam') { 
            els[i].innerHTML = naam; 
        } 
    } 
} 
</script>

vul hier uw naam in

<input onChange="setnaam(this.value)" type="text" name="textfield" id="textfield">
  
<p>Heel lang geleden was er een lief prinsesje, genaamd <span class='naam'></span><br> 
  <span class='naam'></span>woonde in de hoogste toren van een groot kasteel<br> 
  Ze zat er gevangen en wilde graag weg<br> 
Op een morgen kwam een prins langs te paard en  zag<span class='naam'></span></p> 
<p>enzovoort </p>

Maar ik krijg altijd een foutmelding "object wordt verwacht" in de volgende regel:

<input onChange="setnaam(this.value)" type="text" name="textfield" id="textfield">

Weet er iemand wat ik fout doe?

 

[Egel]

 if(els[i].className == 'naam') {

Maar ik zou het iets anders doen: een div met daarin het verhaal, op de plek van de naam staat ...

Met een onload wordt de .innerHTML van de div ingelezen in een variabele en met .split('...') in een array gezet. De functie setnaam gebruikt .join(naam) om de array weer samen te voegen met de juiste naam:

<script type="text/javascript">

 var story = '';

 function getStory() {
  story = document.getElementById('verhaal').innerHTML.split('...');
  };

 window.onload = getStory;

 function setnaam(naam) {
  document.getElementById('verhaal').innerHTML = story.join(naam);
  };

</script>


Vul hier je naam in:
<input onkeyup="setnaam(this.value)" type="text">

<div id="verhaal">
 <p>
  Heel lang geleden was er een lief prinsesje, genaamd ....<br> 
  ... woonde in de hoogste toren van een groot kasteel.<br> 
  Ze zat er gevangen en wilde graag weg.<br> 
  Op een morgen kwam een prins langs te paard en zag ....
 </p> 

 <p>
  enzovoort
 </p> 
</div>

Vr.Gr. Egel.

 

[hoornist]

bedankt !!!

 

[Glest]

Ik zou geen ... gebruiken, het kan zijn dat dat in je verhaal voorkomt. iets als [-[-]-] is veiliger.




Wat je overigens ook kunt doen is inplaat van className gewoon name gebruiken.

<span name="naam"></span>

en vervolgens een array van de spans krijgen

spanArray = document.getElementsByName("naam");

en dan

  for (span in spanArray)
  {
    span.innerHTML = naam;
  }

Met grote verhalen zal dit waarschijnlijk efficienter zijn dan split en join. En het is altijd veiliger aangezien je niet op hoeft te letten wat je scheidings teken is. Maar met een obscuur scheidingsteken maakt dat eigenlijk niet uit.

function setNaam(naam)
{
  document.getElementsByName("naam");
  for (span in spanArray)
  {
    span.innerHTML = naam;
  }
}

vul hier uw naam in

<input onChange="setnaam(this.value)" type="text" name="textfield" id="textfield">
  
<p>Heel lang geleden was er een lief prinsesje, genaamd <span name='naam'></span><br> 
  <span name='naam'></span>woonde in de hoogste toren van een groot kasteel<br> 
  Ze zat er gevangen en wilde graag weg<br> 
Op een morgen kwam een prins langs te paard en  zag<span name='naam'></span></p> 
<p>enzovoort </p>

 

[ErikBooy007]

waarom doe je niet:

<script>
function setNaam(naam){
var text = document.getElementById('verhaal').innerHTML;
var newText = text.replace('...', naam);
document.getElementById('verhaal').innerHTML = newText;
}
</script>

Het heeft toch geen zin om alles in stukjes te knippen en weer aan elkaar te plakken als javascript een ingebouwde functie hiervoor heeft...

 

[Glest]

replace vervangt de tekst maar één keer. Om het meerdere malen te vervangen kun je een regex gebruiken replace(/<<>>/g, naam) maar een regex voor zoiets simpels is wat overdreven.

 

[ErikBooy007]

Oh, excuses, ik wist niet dat .replace() maar één keer werkt...

 

[Glest]

nee, het is ook niet echt logisch

 

[ErikBooy007]

Niet echt nee.... Het PHP-equivalent werkt namelijk wel voor alle exemplaren van de string in de string...

 

[NielsDesmet]

Ze zouden een nieuwe functie moeten toevoegen aan het Javascript library. "ReplaceAll()" ofzo.

 

[ErikBooy007]

precies!

 

[hoornist]

De code van Egel werkt goed
De code van de rest niet echt.

Ik gebruik de code in combinatie met een andere code: de tekst die ik typ moet in hoofdletters verschijnen, zowel in het tekstveld als op de plaats waar de andere woorden moeten komen.

Dit is de code die ik hiervoor gebruik:

<input type="text" size=40 value="" onChange="javascript:this.value=this.value.toUpperCase();">

De code in het tekstveld die jullie geven voor het huidige javascript:

<input onkeyup="setnaam(this.value)" type="text">

Gecombineerd geeft dit:

<script type="text/javascript"> 

 var story = ''; 

 function getStory() { 
  story = document.getElementById('verhaal').innerHTML.split('...'); 
  }; 

 window.onload = getStory; 

 function setnaam(naam) { 
  document.getElementById('verhaal').innerHTML = story.join(naam); 
  }; 

</script> 
<br>
<input onkeyup="setnaam(this.value=this.value.toUpperCase())" name="Name" type="text" class="textfield" id="Name" style="textfield" value="<?php echo($nam);?>" size="50"><br>
Er was eens ...

Dit werk perfect!

Maar... als ik dit ergens anders toepas, werkt dit niet meer. Ik gebruik het nog in combinatie met een andere id

<script type="text/javascript"> 

 var story = ''; 

 function getStory() { 
  story = document.getElementById('bobcontent3').innerHTML.split('bedbooker'); 
  }; 

 window.onload = getStory; 

 function bedbokername(naam) { 
  document.getElementById('bobcontent3').innerHTML = story.join(naam); 
  }; 

</script>

<script type="text/javascript">
// MAIN FUNCTION: new switchcontent("class name", "[optional_element_type_to_scan_for]") REQUIRED
// Call Instance.init() at the very end. REQUIRED

var bobexample=new switchcontent("switchgroup1", "div") //Limit scanning of switch contents to just "div" elements
bobexample.setStatus('<img src="images/minus.gif" /> ', '<img src="images/plus.gif" /> ')
bobexample.setColor('darkred', 'black')
bobexample.setPersist(true)
bobexample.collapsePrevious(true) //Only one content open at any given time
bobexample.init()
</script>
<div align="center" class="style10" id="bobcontent3-title">
<div id="bobcontent3" class="switchgroup1">
<input onkeyup="bedbokername(this.value=this.value.toUpperCase())" name="Name" type="text" class="textfield" id="Name" style="textfield" value="<?php echo($nam);?>" size="50">

dit is een bedbooker
</div>
</div>

Als je het uitprobeer zie je het probleem. Ik moet namelijk 2 id's in één krijgen, en omdat dat niet gaat gebruik ik 2 div's, met dit als gevolg.

Zie dze website waar ik het heb gedaan. Bovenaan vul je achter hotel de naam in. In het gele gedeelte wordt alles toegepast (onderaan)

 

[Glest]

ik zie een nogal stom foutje in mijn script:

function setNaam(naam)
{
  [b]spanArray = [/b]document.getElementsByName("naam");  // Dik gedruikte deel vergeten.
  for (span in spanArray)
  {
    span.innerHTML = naam;
  }
}

Maar goed dat had je opzich zelf ook wel kunnen zien

 

[Egel]

Maar... als ik dit ergens anders toepas, werkt dit niet meer.

IK denk dat er dan nog een window.onload is die de eerste overschrijft.

Maar zo kan het ook:

<script type="text/javascript">
 var story = '';
 function getStory() {
  story = document.getElementById('verhaal').innerHTML.split('...');
  };
 function setnaam(elm) {
  elm.value = elm.value.toUpperCase();
  document.getElementById('verhaal').innerHTML = story.join(elm.value);
  };
</script>


Vul hier je naam in:
<input onchange="setnaam(this);" type="text">

<div id="verhaal">
 <p>
  Heel lang geleden was er een lief prinsesje, genaamd ....<br> 
  ... woonde in de hoogste toren van een groot kasteel.<br> 
  Ze zat er gevangen en wilde graag weg.<br> 
  Op een morgen kwam een prins langs te paard en zag ....
 </p>

 <p>
  enzovoort
 </p> 
</div>

<script type="text/javascript">
 getStory();
</script>

Als het tweede script maar na de div komt in de broncode.

De functie setnaam() zet het nu ook in hoofdletters.


Vr.Gr. Egel.

 

[Glest]

als je met split en join gaat werken zou ik geen ... gebruiken. Dat zou in je verhaal kunnen staan. Gebruik beter iets als {{|-|}}

 

[Johantrax]

Is het eigenlijk noodzakelijk dat je verhaal er al staat met vervangsymbolen?
Anders kan je gewoon je volledige verhaal laten plaatsen door js mbv innerHTML...