JavaScript for interactive web pages - JavaScript syntax - Using DOM objects
3 belangrijke vragen over JavaScript for interactive web pages - JavaScript syntax - Using DOM objects
Hoe zorg je ervoor dat er een hond in plaats van een kat op het scherm verschijnt, als de onderstaande HTML code wordt gebruikt:
<img id="mypet" src="cat.jpg" alt="my favorite pet" />
var myImage = document.getElementId("mypet");
myImage.src="dog.jpg";
Wat moet er gedaan worden om de volgende html code goed te laten werken, zodat nadat er op compute gedrukt wordt de juiste uitkomst getoond wordt
<h1> The Amazing Multiplier</h1>
<div>
<input type="text" size="3" /> * <input type="text" size="3" /> = <br/>
<button>Compute!</button>
</div>
Eerst linken van de pagina aan de JavaScript file
<script src="multiply.js" type="text/javascript"></script>
Hierna moeten we zorgen dat we de html pagina aanpassen, zodat de invoervelden een id attribuut
<h1> The Amazing Multiplier</h1>
<div>
<input id="num1" type="text" size="3" /> *
<input id="num2" type="text" size="3" /> =
<span id="answer"></span> <br/>
<button onclick="compute();">Compute!</button>
</div>
Nu moet de compute functie nog geschreven worden
//Vermenigvuldigd 2 nummers die ingevoerd worden op de pagina
//en laat het resultaat zien in een span
function compute() {
var input1 = document.getElementById("num1"); //fetch de 2 nummers
var input2 = document.getElementById("num2");
var answer = document.getElementById("answer");
var result = input1.value * input2.value; //compute result
answer.innerHTML = result;
}
Wat is het verschil tussen de value en innerHTML properties
De meeste DOM objecten hebben hun inner content in innerHTML, maar controls zoals tekst boxes bewaren hun waarde in value.
Het verschil kan samengevat worden in het volgende voorbeeld:
<div>this is innerHTML inside a div element</div>
<input type="text" value="this is value inside an input element" />
De vragen op deze pagina komen uit de samenvatting van het volgende studiemateriaal:
- Een unieke studie- en oefentool
- Nooit meer iets twee keer studeren
- Haal de cijfers waar je op hoopt
- 100% zeker alles onthouden
Onthoud sneller, leer beter. Wetenschappelijk bewezen.
