Wat doe ik niet goed in deze javascript function?
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
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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> 10%</option>
<option value="20" > 20%</option>
<option value="30"> 30%</option>
<option value="40"> 40%</option>
<option value="50"> 50%</option>
<option value="60"> 60%</option>
<option value="70"> 70%</option>
<option value="80"> 80%</option>
<option value="90"> 90%</option>
<option value="100"> 100%</option>
</select>
<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" />
<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> 10%</option>
<option value="20" > 20%</option>
<option value="30"> 30%</option>
<option value="40"> 40%</option>
<option value="50"> 50%</option>
<option value="60"> 60%</option>
<option value="70"> 70%</option>
<option value="80"> 80%</option>
<option value="90"> 90%</option>
<option value="100"> 100%</option>
</select>
<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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<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>
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>
Gewijzigd op 20/02/2018 17:04:51 door Jan te Pas
- 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:
Dan kun je je function reduceren tot één regel?
- heb je een afbeelding met id "score"?
- heb je een element met id "waarde"?
Ik heb 10 plaatjes met scores. Ze hebben de afmeting 179x25 pixels.
Het plaatje wordt naast de select opties getoond:
Code (php)
1
<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:
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.
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.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!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>
<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>
Thanks, ik heb eea nu werkend. Top dat jij mij de goede kant op gezet hebt. Dank!
Jan
Gewijzigd op 20/02/2018 20:39:22 door Jan te Pas