Textbox waarde uit tabel lezen

Status
Niet open voor verdere reacties.

geenID

Gebruiker
Lid geworden
1 jul 2009
Berichten
312
hallo, ik heb de volgende vraag:

ik heb een tabel van 2 rijen met bepaalde waardes. De gebruiker moet een veelvoud van 3 invoeren bij de duikdiepte-textbox, dus 0, of 3, 6, 9 ... 15 of 18 etc tot 54.
Wanneer de gebruiker geen veelvoud van 3 invoert moet er een alert komen.

Dis een voorbeeld:

Gebruiker voert 18 in, dan moet javascript kijken of de 18 in de tabel voorkomt, zo ja dan is het goed. Wanneer dat niet zo is show alert error.

Dit is wat ik al heb

HTML
HTML:
<!DOCTYPE html>
<html lang="nl">
	<head>
		<title>Javascript</title>
		<link rel="stylesheet" href="Styles.css" type="text/css"/>
		<script type="text/javascript" src="Functies.js"></script>
	</head>
	
	<body>
	
	<form name="Form" id="Form">
		<fieldset>
			<legend>Invoer</legend> <!-- Groupbox voor invoer -->
			<table>  
				<tr>
					<td><label for="Diepte">Duikdiepte</label></td>
					<td><input type="text" id="Diepte"></td>
				</tr>
				<tr>
					<td><label for="Tijd">Duiktijd</label></td>
					<td><input type="text" id="Tijd"></td>
				</tr>
				<tr>
					<td><button type="button" id="Check" onclick="Is3Voud()">Check</button></td>
				</tr>
			</table>
		</fieldset>	
	</Form>	

	
		<fieldset>
			<legend>Tabel</legend> <!-- Groupbox voor tabel -->
				<table border="4">
					<tr>
						<td>Diepte</td>
						<td>0-9</td>
						<td>9</td>
						<td>12</td>
						<td>15</td>
						<td>18</td>
						<td>21</td>
						<td>24</td>
						<td>27</td>
						<td>30</td>
						<td>33</td>
						<td>36</td>
						<td>39</td>
						<td>42</td>
						<td>45</td>
						<td>48</td>
						<td>51</td>
						<td>54</td>
					</tr>
					
					<tr>
						<td>Tijd</td>
						<td>No limit</td>
						<td>300</td>
						<td>150</td>
						<td>75</td>
						<td>50</td>
						<td>35</td>
						<td>25</td>
						<td>20</td>
						<td>15</td>
						<td>12</td>
						<td>10</td>
						<td>8</td>
						<td>7</td>
						<td>7</td>
						<td>6</td>
						<td>6</td>
						<td>5</td>
					</tr>
				</table>
		</fieldset>		
	</body>
</html>


JS
Code:
function Is3Voud()
{

var input = document.Form.Diepte.value;

	if (input == 0 || input == 3 || input == 6) // Dit moet op een betere manier kunnen toch?
	{	
		alert("Correct ingevuld");
	}
	
	else 
	{
		alert("Incorrecte waardes ingevuld!");
	}
};
 
Ik neem aan dat je vraag is hoe je op een betere manier kunt controleren of de ingevoerde waarde een veelvoud is van 3?

Dat kan met de modulus-operator (%). Dat levert de restwaarde op na een deling. Bijvoorbeeld 18 % 3 = 0 (18/3 is 6, rest 0); 19 % 3 = 1 (19/3 = 6, rest 1); 20 % 3 = 2 (20/3 = 6, rest 2). Een veelvoud van drie heeft, als je modulo 3 gebruikt (input % 3), als uitkomst 0.
 
Laatst bewerkt:
Ik neem aan dat je vraag is hoe je op een betere manier kunt controleren of de ingevoerde waarde een veelvoud is van 3?

Bedankt voor je snelle reply. Ja dit klopt.

Maar ik hoef geen dingen uitterekenen, dus die modules is niet wat ik zoek. De waarden staan al vast in de tabel, er zijn geen berekeningen nodig.


Stel de gebruiker voer "9" in als duikdiepte, dan moet javascript in de html-tabel gaan zoeken naar welke duiktijd er bij 6 hoort, in dit geval is dat 300.
En als de gebruiker iets anders invult wat niet 3 voudig is, en dus niet in de tabel voorkomt, error.
 
Het is mogelijk om de waardes die in de tabel staan op te vragen met Javascript. Als je elke td een eigen "id" geeft kan je gebruik maken van [js]document.getElementById('de_id_die_je_op_wilt_vragen').innerHTML[/js] Zonder zo'n "id" kan je iets soortgelijks doen met document.getElementsByTagName. Dat wordt dan bijv. [js]document.getElementsByTagName("td")[8].innerHTML)[/js]
Dit is wat lastiger, omdat je met getElementsByTagName alle elementen met die tag (in dit geval "td") krijgt en je daar de juiste in moet zoeken (bijvoorbeeld het 9e element (met index 8 ([8]))).


Een makkelijkere methode is misschien om de tabel te laten genereren met Javascript. Het nadeel is dan wel dat de tabel niet zichtbaar is als Javascript uitstaat of niet ondersteund wordt, maar deze berekening wordt wel makkelijker. Dan krijg je zoiets:
[js]var diepte = ['0-9', 9, 12, 15]; //zelf aanvullen
var tijd = ['No limit', 300, 150, 75]; // ook zelf aanvullen[/js]
Zoeken of een diepte voorkomt is dan heel eenvoudig met indexOf. Die functie levert de index (positie in de array) op, die kan je dan meteen gebruiken om de juiste tijd uit de andere array te halen (staat op dezelfde index):
[js]var index = diepte.indexOf(input);
if (index == -1)
{
//komt niet voor
}
else
{
var duiktijd = tijd[index];
}[/js]
Om de tabel te tonen kan je middels een lus door de arrays lopen:
[js]for (var i=0;i<diepte.length;i++)
{
document.writeln('<td>' + diepte + '</td>');
}[/js]
 
Laatst bewerkt:
Cool, heel erg bedankt voor je hulp!

Desondanks wil ik de table precies zo hebben als in HTML, maar dan met javascript code. Dit wil niet echt lukken.

Dus wat ik nu wil, is wat jij al zei, een table die gemaakt voor DMV javascript.

ps: Ik neem aan de de "input" het getal is wat de gebruiker invult in de textbox?

Code:
function test() 
{

	// Controleer voor user-input
	var waardeDiepte = document.Form.Diepte.value
	var waardeTijd = document.Form.Tijd.value
	
	if (waardeDiepte == 0 || waardeTijd == 0)
	{
		alert("Vul AUB iets in");
		return
	}
	
	else
	{

	// Arrays
	var diepte = ['0-9', 9, 12, 15, 18, 21, 24, 27, 30, 33, 36, 39, 42, 45, 48, 51, 54];
	var tijd = ['No limit', 300, 150, 75, 50, 35, 25, 20, 15, 12, 10, 8, 7, 7, 6, 6, 5];

	// Het schrijven van de tabel
	for (var i=0; i<diepte.length; i++)
	{
		document.writeln("<td>" + diepte[i] + "</td>");
	}	




	var index = diepte.indexOf(input);
	if (index == -1)
	{
	  alert("Vul AUB een geldig 3-voudig getal in");
	}
	else
	{
	  var duiktijd = tijd[index];
	}
	}
};
 
Laatst bewerkt:
De stukjes code die ik gaf waren bedoeld ter illustratie van de tekst. Je kan ze dus niet zomaar onder elkaar zetten. De pagina ziet er dan zo ongeveer uit:
HTML:
<!DOCTYPE html>
<html lang="nl">
    <head>
        <title>Javascript</title>
        <link rel="stylesheet" href="Styles.css" type="text/css"/>
        <script type="text/javascript" src="Functies.js"></script>
    </head>
    
    <body>
    
    <form name="Form" id="Form">
        <fieldset>
            <legend>Invoer</legend> <!-- Groupbox voor invoer -->
            <table>  
                <tr>
                    <td><label for="Diepte">Duikdiepte</label></td>
                    <td><input type="text" id="Diepte" name="Diepte"></td>
                </tr>
                <tr>
                    <td><label for="Tijd">Duiktijd</label></td>
                    <td><input type="text" id="Tijd" name="Tijd"></td>
                </tr>
                <tr>
                    <td><button type="button" id="Check" onclick="Is3Voud(this.form.Diepte.value, this.form.Tijd.value)">Check</button></td>
                </tr>
            </table>
        </fieldset> 
    </Form> 
 
    
        <fieldset>
            <legend>Tabel</legend> <!-- Groupbox voor tabel -->
                <table border="4">
                    <tr>
                        <td>Diepte</td>
                        <script type="text/javascript">
                        <!--
                          schrijfTabel('diepte');
                        // -->
                        </script>
                    </tr>
                    
                    <tr>
                        <td>Tijd</td>
                        <script type="text/javascript">
                        <!--
                          schrijfTabel('tijd');
                        // -->
                        </script>
                    </tr>
                </table>
        </fieldset>     
    </body>
</html>

Functies.js:
[js]// Arrays
var diepte = ['0-9', 9, 12, 15, 18, 21, 24, 27, 30, 33, 36, 39, 42, 45, 48, 51, 54];
var tijd = ['No limit', 300, 150, 75, 50, 35, 25, 20, 15, 12, 10, 8, 7, 7, 6, 6, 5];

function schrijfTabel(welke)
{
if (welke == 'diepte')
{
for (var i=0; i<diepte.length; i++)
{
document.writeln("<td>" + diepte + "</td>");
}
}
else
{
for (var i=0; i<tijd.length; i++)
{
document.writeln("<td>" + tijd + "</td>");
}
}
}

function Is3Voud(waardeDiepte, waardeTijd)
{
var index = diepte.indexOf(parseInt(waardeDiepte));
if (index == -1)
{
alert("Vul AUB een geldig 3-voudig getal in");
}

}[/js]

Het deel over de duiktijd heb ik er nog uit gelaten, omdat ik niet precies weet wat er gecontroleerd moet worden in Is3Voud(). Het controleert nu alleen of de duikdiepte een 3-voud is. Dit werkt wel alleen als de duikdiepte minimaal 9 is. In de tabel staat immers 0-9 voor lagere waardes.
 
Laatst bewerkt:
oh haha, nou ja ik heb het een en ander veranderd en alles werkt nu perfect.
Ik wil je echt heel erg bedanken voor je hulp én voor de snelle reacties!
Probleem opgelost.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan