Wat doe ik niet goed in deze javascript function?

Door Jan te Pas op 20-02-2018 14:09 gewijzigd op 20-02-2018 17:04

2.087 views

Hallo allemaal,
Ik ben aan het stoeien met javascript. Gaat eigenlijk goed. Maar loop nu tegen het volgend eaan.

Ik heb een formulier met een veld "Aantal, dit veld heeft ook als id="aantal"
Nu wil ik bij het wisselen van een aantal in dit veld een andere afbeelding tonen bij een selectbox. De selectbox heeft onchange ingesteld:
<select name="steek" id="steek" onchange="barometer(this.value);">
Als ik alleen dit doe. Krijg ik niet eens de alertbox te zien. Als ik alle voorwaardentest: if (x>1 && x<50) {
weghaal, dan werkt het wel op basis van de variabele 'valle' die meegegeven wordt.
Ik zie kennelijk iets over het hoofd.
Wie kan mij helpen? Dank!
Jan

De input met de afbeelding die gewisseld wordt


<labeL>Aantal worpen:</font><label><br>
<input type="text" name="aantal" id="aantal" minlength="1" maxlength="10" placeholder="Aantal" size="10" required>
<br>
<label>Het scorepercentage  (in %)<label><br>
<select name="steek" id="steek" onchange="barometer(this.value);">
				          <option value="10" selected>&nbsp;10%</option>
  				          <option value="20" >&nbsp;20%</option>
  				          <option value="30">&nbsp;30%</option>
  				          <option value="40">&nbsp;40%</option>
  				          <option value="50">&nbsp;50%</option>
  				          <option value="60">&nbsp;60%</option>
  				          <option value="70">&nbsp;70%</option>
  				          <option value="80">&nbsp;80%</option>
  				          <option value="90">&nbsp;90%</option>
  				          <option value="100">&nbsp;100%</option>
  </select>
  &nbsp;&nbsp;&nbsp;
  <img src="1.jpg" name="score" id="score" align="top" width="179px" height="25px"  onclick="popupCenter('Scorekaart.html','Steekproef uitleg',800,800)" title="Klik hier voor meer informatie over de scorekaart" />

De functie die wel werkt:


<script>
function barometer(valle) {
              var x = document.getElementById("aantal").value;
              // is wel een waarde, aantal woningen ingevuld?
              //alert(x);
              //break;
		if (valle==10) {document.getElementById("score").src = "1.jpg";}
		if (valle==20) {document.getElementById("score").src = "2.jpg";}
		if (valle==30) {document.getElementById("score").src = "3.jpg";}
		if (valle==40) {document.getElementById("score").src = "4.jpg";}
		if (valle==50) {document.getElementById("score").src = "5.jpg";}
		if (valle==60) {document.getElementById("score").src = "6.jpg";}
		if (valle==70) {document.getElementById("score").src = "7.jpg";}
		if (valle==80) {document.getElementById("score").src = "8.jpg";}
		if (valle==90) {document.getElementById("score").src = "9.jpg";}
		if (valle==100) {document.getElementById("score").src = "10.jpg";}
}
</script>

Ik wilde iets uitbreiden, maar dan loop ik tegen een probleem. Als ik de alert uit de comments haal. Dan krijg ik geen alert te zien. Bij de eerste function wel.

De functie die niet werkt:


<script>
function barometer(valle) {
        var x = parseInt(document.getElementById("aantal").value);    //haar waarde uit invoerveld met id 'aantal'    
        //test of waarde goed meekomt.
        //alert(x);
        //break; 
        if (x>1 && x<50) {
		  if (valle==10) {document.getElementById("score").src = "1.jpg";}
		  if (valle==20) {document.getElementById("score").src = "2.jpg";}
		  if (valle==30) {document.getElementById("score").src = "3.jpg";}
		  if (valle==40) {document.getElementById("score").src = "4.jpg";}
		  if (valle==50) {document.getElementById("score").src = "5.jpg";}
		  if (valle==60) {document.getElementById("score").src = "6.jpg";}
		  if (valle==70) {document.getElementById("score").src = "7.jpg";}
		  if (valle==80) {document.getElementById("score").src = "8.jpg";}
		  if (valle==90) {document.getElementById("score").src = "9.jpg";}
		  if (valle==100) {document.getElementById("score").src = "10.jpg";}   
		} else if (x>49 && x<200) {
		  if (valle==10) {document.getElementById("score").src = "11.jpg";}
		  if (valle==20) {document.getElementById("score").src = "12.jpg";}
		  if (valle==30) {document.getElementById("score").src = "13.jpg";}
		  if (valle==40) {document.getElementById("score").src = "14.jpg";}
		  if (valle==50) {document.getElementById("score").src = "15.jpg";}
		  if (valle==60) {document.getElementById("score").src = "16.jpg";}
		  if (valle==70) {document.getElementById("score").src = "17.jpg";}
		  if (valle==80) {document.getElementById("score").src = "18.jpg";}
		  if (valle==90) {document.getElementById("score").src = "19.jpg";}
		  if (valle==100) {document.getElementById("score").src = "20.jpg";}     
		} else if (x>49 && x<200) {
		  if (valle==10) {document.getElementById("score").src = "21.jpg";}
		  if (valle==20) {document.getElementById("score").src = "22.jpg";}
		  if (valle==30) {document.getElementById("score").src = "23.jpg";}
		  if (valle==40) {document.getElementById("score").src = "24.jpg";}
		  if (valle==50) {document.getElementById("score").src = "25.jpg";}
		  if (valle==60) {document.getElementById("score").src = "26.jpg";}
		  if (valle==70) {document.getElementById("score").src = "27.jpg";}
		  if (valle==80) {document.getElementById("score").src = "28.jpg";}
		  if (valle==90) {document.getElementById("score").src = "29.jpg";}
		  if (valle==100) {document.getElementById("score").src = "30.jpg";}  
		}
}
</script>

Thomas van den Heuvel

20-02-2018 17:08

- hoe zien je options eruit?
- kun je voor "valle" niet beter de naam van de afbeelding gebruiken, en in option de "valle" tonen, maar de naam van de afbeelding als value gebruiken? dus zoiets:

<option value="25">50</option>

Dan kun je je function reduceren tot één regel?

function barometer(val) {
    document.getElementById('score').src = val+'.jpg';
}

- heb je een afbeelding met id "score"?
- heb je een element met id "waarde"?

Jan te Pas

20-02-2018 18:24

Hoi Thomas,
Ik heb 10 plaatjes met scores. Ze hebben de afmeting 179x25 pixels.
Het plaatje wordt naast de select opties getoond:


<img src="1.jpg" name="score" id="score" align="top" width="179px" height="25px"  onclick="popupCenter('Scorekaart.html','Steekproef uitleg',800,800)" title="Klik hier voor meer informatie over de scorekaart" />

De select, heb ik zo opgezet:


<select name="steek" id="steek" onchange="barometer(this.value);">

dat is de aanroep van de function. Als parameter wordt de gekozen waarde van de selectbox meegegeven.
Bij de definitie van de functie zet ik de waarde van het 'aantal'- veld in x.
Ik wil bij verschillende aantallen andere plaatjes laten zien. Dus ik heb straks meer dan 30 afbeeldingen. Welke getoond wordt is afhankelijk van de waarde die ingevoerd wordt in 'aantal' en dan check ik dat bij de functie
Als aantal>9 && aantal< dan.
En dat gaat mij dus niet goed lukken.
Ik weet niet wat ik fout doe.

Thomas van den Heuvel

20-02-2018 19:47

Ik snap wat je probeert te doen, mijn aanpak stelt een versimpeling voor.

Je controleert trouwens twee keer hetzelfde interval (x>49 && x<200). Als x hier aan voldoet zal altijd het if-statement van regel 18 gebruikt worden, en nooit die van regel 29.

Het volgende werkt voor mij prima, dus ik weet niet wat je verkeerd doet. Mogelijk wil je wel de Return/Enter-toets afvangen als je een aantal intoetst, want dat ververst mogelijk de pagina.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript select test</title>
</head>

<body>
<form>
aantal <input type="text" name="aantal" id="aantal" value="1"><br>
<select name="steek" id="steek" onchange="barometer(this.value)">
    <option value="">-- selecteer --</option>
    <option value="1">10</option>
    <option value="2">20</option>
    <option value="3">30</option>
    <!-- et cetera -->
    <option value="8">80</option>
    <option value="9">90</option>
    <option value="10">100</option>
</select>
</form>
<img src="1.jpg" id="score" alt="hello" width="75" height="25">
<script type="text/javascript">
//<![CDATA[
function barometer(val) {
    var aantal = parseInt(document.getElementById('aantal').value);
    var steek = parseInt(val);
    var afbeeldingNr = 1; // of een zinnige default
    if (isNaN(aantal) || isNaN(steek)) {
        // geef foutmelding of een vorm van terugkoppeling
        alert('no numbers');
    } else {
        // indien aantal tussen  0 t/z 50: + 0
        // indien aantal tussen 50 t/z 200 + 10
        // et cetera
        if (aantal > 0 && aantal < 50) {
            afbeeldingNr = steek;
        } else if (aantal >= 50 && aantal < 200) {
            afbeeldingNr = steek + 10;
        }
        // et cetera
        document.getElementById('score').src = afbeeldingNr+'.jpg';
    }
}
//]]>
</script>
</body>
</html>

Jan te Pas

20-02-2018 19:51 gewijzigd op 20-02-2018 20:39

Dank Thomas,
Thanks, ik heb eea nu werkend. Top dat jij mij de goede kant op gezet hebt. Dank!
Jan

Reageren

Inloggen om te reageren