if else javascript

Status
Niet open voor verdere reacties.
E

erwin1970

Nieuwe gebruiker
Lid geworden
27 nov 2011
Berichten
3
Ik heb al verschillende sites geraadpleegd en geraak er niet wijzer uit. Ik ben nog maar 3 weken bezig met javascript maar blijf al een week hangen op deze fout. Regelmatig krijg ik in plaats van hetgeen er werkelijk moet komen het woord "undefined" Ik wil met de knop volgende en vorige naar het volgende of vorige woord gaan in mijn array, dus ik heb er ook een if toegevoegd als hij aan het laatste woord komt moet hij terug naar eerst woord else +1
Code: 
<!DOCTYPE html>
<html lang="en">
<head>
<title>NL naar HU</title>

<script type="text/javascript"> 
     let hongaars = 0;    
       const Hu = ["egy","kettő","három","négy","ot"];   
     let nederlands = 0;   
       const Nl = ["een","twee","drie","vier","vijf"];     
</script>

<script>
     function volgendWoord() {
     document.getElementById ("hongaars").innerHTML = Hu[hongaars];
          if (hongaars === Hu.length -1) {hongaars = 0;}
          else hongaars++;
     document.getElementById("nederlands").innerHTML = Nl[nederlands];         
          if (nederlands === Hu.length -1) {nederlands = 0;}
          else nederlands++;
     }
</script> 
     
<script>
     function vorigWoord() {
          if (hongaars === 0) {hongaars = Hu.length -1;}
          else hongaars--; 
     document.getElementById("hongaars").innerHTML = Hu[hongaars];
         if (nederlands === 0) {nederlands = Nl.length -1;}
         else nederlands--;
     document.getElementById("nederlands").innerHTML = Nl[nederlands];                  
     }
</script>
     
<script>
      function play() { 
        var audio = document.getElementById("audio");
        var audio1 = document.getElementById("audio1");
        var x = document.getElementById("audio").ended; 
       
        audio.play();
        audio.onended = function(){audio1.play();}
      }
</script>
     
</head>

<body>
     
   <!--  
     <p id="mp3"></p>
     <script>
     var mp3 = hongaars +1 +".mp3";
     document.getElementById("mp3").innerHTML = mp3;
     </script>
   --->
     
<center>

<table table width="600" table height="300" border="0" bgcolor= "#eaf4ba">
<tr height="35%">
      <td></td>
      <td colspan=4><center><b id="hongaars"></b><script>document.getElementById("hongaars").innerHTML = Hu[0];</script></center></td> 
      <td></td>
</tr>

<tr height="35%">
      <td><center><button onclick="vorigWoord()">‹‹</button></center></td>
      <td colspan=4><center><b id="nederlands"></b><script>document.getElementById("nederlands").innerHTML = Nl[0];</script></center></td>
      <td><center><button onclick="volgendWoord()">››</button></center></td>
</tr>

<tr height="30%">
      <td></td>
      <td><center><button onclick="naarHuis()">HOME</button></center></td> <td><center><button onclick="duimOmhoog()">I KNOW</button></center></td>
      <td><center><button onclick="duimOmlaag()">NOT NOW</button></center></td>
      <td><center><input type="button" value="PLAY" onclick="play()"><audio id="audio" src="geluid/HU/1.mp3"></audio><audio id="audio1" src="geluid/NL/1.mp3"></audio></center></td>
      <td></td>
</tr>

</table>

</center>

 </body>
</html>
 
Laatst bewerkt door een moderator:
Kan je het op JSfiddle delen?
Dan kunnen we makkelijker meekijken!
 
Tip: zet JavaScript helemaal onderaan dan is alle html bekend, of nog liever alle JavaScript in een apart .js bestand, zet
dan de regel <script src="...."></script> helemaal onderaan boven </body> dus onder alle andere html.
Code: 
<!doctype html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>NL naar HU</title>
</head>
<body>

<p id="mp3"></p>

<center>
<table width="600" height="300" border="0" bgcolor= "#eaf4ba">
    <tr height="35%">
        <td></td>
        <td colspan="4"><center><b id="hongaars"></b></center></td>
        <td></td>
    </tr>
    <tr height="35%">
        <td><center><button onclick="vorigWoord()">‹‹</button></center></td>
        <td colspan="4"><center><b id="nederlands"></b></center></td>
        <td><center><button onclick="volgendWoord()">››</button></center></td>
    </tr>
    <tr height="30%">
        <td></td>
        <td><center><button onclick="naarHuis()">HOME</button></center></td>
        <td><center><button onclick="duimOmhoog()">I KNOW</button></center></td>
        <td><center><button onclick="duimOmlaag()">NOT NOW</button></center></td>
        <td>
        <center>
        <input type="button" value="PLAY" onclick="play()">
        <audio id="audio" src="geluid/HU/1.mp3"></audio>
        <audio id="audio1" src="geluid/NL/1.mp3"></audio>
        </center>
        </td>
        <td></td>
    </tr>
</table>
</center>

<script>
let hongaars = 0;
const Hu = ["egy","kettő","három","négy","ot"];

let nederlands = 0;
const Nl = ["een","twee","drie","vier","vijf"];

document.getElementById("hongaars").innerHTML = Hu[0];
document.getElementById("nederlands").innerHTML = Nl[0];

var mp3 = hongaars + 1 + ".mp3";
document.getElementById("mp3").innerHTML = mp3;

function volgendWoord() {
    document.getElementById ("hongaars").innerHTML = Hu[hongaars];
    if (hongaars === Hu.length -1) {
        hongaars = 0;
    }
    else hongaars++;
    document.getElementById("nederlands").innerHTML = Nl[nederlands];
    if (nederlands === Hu.length -1) {
        nederlands = 0;
    }
    else nederlands++;
}

function vorigWoord() {
    if (hongaars === 0) {
        hongaars = Hu.length -1;
    }
    else hongaars--;
    document.getElementById("hongaars").innerHTML = Hu[hongaars];
    if (nederlands === 0) {
        nederlands = Nl.length -1;
    }
    else nederlands--;
    document.getElementById("nederlands").innerHTML = Nl[nederlands];
}

function play() {
    var audio  = document.getElementById("audio");
    var audio1 = document.getElementById("audio1");
    var x = document.getElementById("audio").ended;
    audio.play();
    audio.onended = function(){
        audio1.play();
    }
}
</script>

</body>
</html>
 
Laatst bewerkt:
in visual studio code geeft die geen probleem

ik denk eerder dat ik het moet zoeken in welke browser ik het open want in google heb ik geen probleem. Ik weet dat het beter is javascript apart te zetten in *.js bestand maar op dit moment vind ik het overzichtelijker en makkelijker alles in 1 document zodat ik tijdelijk alle lijnen niet van belang uitschakel met // of dergelijke. Nu ben ik al verder met aanpassen en wil mijn 1.mp3 enz.. in een variabele steken om telkens als ik naar het volgende woord ga dus ook naar het volgende mp3 moet gaan. dus de mp3 is telkens ook 1,2,3, enz...
Code: 
<p id="mp3"></p>
<script>
var mp3 = hongaars +1 +".mp3";
document.getElementById("mp3").innerHTML = mp3;
</script>

de variabele aanmaken en gebruiken is geen probleem maar vind nergens hoe ik dit in men volgende code moet aanpassen
Code: 
<input type="button" value="PLAY" onclick="play()">
<audio id="audio" src="geluid/HU/1.mp3"></audio>
<audio id="audio1" src="geluid/NL/1.mp3"></audio>

normaal zou ik zeggen
Code: 
<input type="button" value="PLAY" onclick="play()">
<audio id="audio" src="geluid/HU/'<p id="mp3"></p>' "></audio>
<audio id="audio1" src="geluid/NL/1.mp3"></audio>

ik verwacht niet dat iemand me het antwoord geeft maar liefst een site met het naslagwerk of hoe ik deze vraag moet formuleren in men zoekmachine

alvast bedankt
 
Laatst bewerkt door een moderator:
Het lijkt de bedoeling dat er precies evenveel woorden in Hongaars als in Nederlands zijn. In dat geval hoef je niet apart HU en NL bij te houden. Je kan een algemene "index" gebruiken.
Code: 
const Hu = ["egy","kettő","három","négy","ot"];
const Nl = ["een","twee","drie","vier","vijf"];

let index = 0;

document.getElementById("hongaars").innerHTML   = Hu[index];
document.getElementById("nederlands").innerHTML = Nl[index];

let mp3 = index + 1 + ".mp3";
document.getElementById("mp3").innerHTML = mp3;

function volgendWoord() {
    if (index === Hu.length -1)
        index = 0;
    else
        index++;
    document.getElementById ("hongaars").innerHTML = Hu[index];
    document.getElementById("nederlands").innerHTML = Nl[index];
}

De mp3 bekijk ik nog.
 
Niet getest maar dit is het idee.

Code: 
[B]HTML[/B]

<audio id="audio" controls="controls">
  <source id="audioSource" src=""></source>
</audio>

[B]JS[/B]

var audio  = document.getElementById("audio");
var source = document.getElementById("audioSource");
source.src = "geluid/HU/" + index + ".mp3";
audio.load();
audio.play();
 
Laatst bewerkt:
code werkt niet

ik heb alles geprobeerd en verder opzoekwerk gedaan maar de laatste code werkt bij mij niet
krijg de error: Uncaught TypeError TypeError: Cannot set properties of null (setting 'src')
in dit geval op de derde lijn van de js code
 
Laatst bewerkt:
Net even een test gedaan met de code, werkt prima.
Code: 
<script>
// functie laadt nieuwe mp3 en start daarna afspelen -->
function wijzigAudio(mp3bestand) {
  var audio  = document.getElementById("audio");
  var source = document.getElementById("audioSource");
  source.src = mp3bestand;
  audio.load();
  audio.play();
}
</script>

<!-- alleen voor demo/test -->
<button type="button" onclick="wijzigAudio('geluid/NL/1.mp3')">NL 1.mp3</button>
<button type="button" onclick="wijzigAudio('geluid/HU/1.mp3')">HU 1.mp3</button>
<br><br>

<!-- audiospeler -->
<audio id="audio" controls="controls">
  <source id="audioSource" src=""></source>
</audio>

Als je de audiospeler niet wilt zien, zet dan deze style erbij.
Code: 
<audio id="audio" controls="controls" style="display:none;">
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan