Embedded Files
HTML id vs class
HTML id vs class
To update specific elements of an html interface via JavaScript means each html element you want to alter requires a name. that the program can use.
To alter:
a specific html element means you need to have a html id attached to that element. It must be unique within the .html file.
EG: <p id="p_name">
a group of html elements means they need to have a html class attached to the elements you want to change. Many elements can have the same class name.
EG: <p class="p_age">
<p class="p_address">
HTML naming convention
HTML naming convention
When developing JavaScript which updates a number of html elements, it soon becomes apparent you should have a naming convention for the html elements. Here is a suggested naming convention:
element type_name where element type is p for paragraph, b for button, d for division, i for input
EG:
p_name contains user's name
p_age contains user's age
b_start start button
i_name input box for user's name
Changing HTML Content
Changing HTML Content
The easiest way to modify the content of an HTML element is by using the innerHTML property.
To change the content of an HTML element, use this syntax:
document.getElementById(id).innerHTML = new HTML
where:
id is the html id of the element to change
new HTML is the new content
Simple example of asking the user for their name & updating the html greeting paragraph
Simple example of asking the user for their name & updating the html greeting paragraph
<html>
<body>
<p id="p_greeting">Hello World!</p>
<script>
var userName = prompt("what is your name?");
document.getElementById("p_greeting").innerHTML = "Hello " + userName;
</script>
</body>
</html>
changing HTML attributes
changing HTML attributes
To change the value of an HTML attribute, use this syntax:
document.getElementById(id).attribute = new value
where:
id is the html id of the element to change
new value is the new content
Building on the example above.
Building on the example above.
Add code to ask for a valid colour & use it to alter the greeting paragraph's color attribute
Add code to ask for a valid colour & use it to alter the greeting paragraph's color attribute
<!DOCTYPE html>
<html>
<body>
<p id="p_greeting" style="color:red;">Hello World!</p>
<script>
var userName = prompt("what is your name?");
var userColour = prompt("specify a valid html color");
document.getElementById("p_greeting").innerHTML = "Hello " + userName;
document.getElementById("p_greeting").style="color:" + userColour + ";"
</script>
</body>
</html>
As you will likely want to alter a number of html elements, it is useful to define a function with input parameters.
As you will likely want to alter a number of html elements, it is useful to define a function with input parameters.
IE; create a general purpose html element update function.
IE; create a general purpose html element update function.
Then you can just call this function from anywhere in you code, passing it the:
Then you can just call this function from anywhere in you code, passing it the:
- html id of the element to change
- new value to change to
EG,
EG,
- Write a multi purpose function to change an html element:
function changeElement(_elementId, _value) {
function changeElement(_elementId, _value) {
JavaScript command to alter html element
JavaScript command to alter html element
}
}
- Then call it. For example to change the name paragraph with an html id of p_name to Bob:
changeElement("p_name", "Bob");
changeElement("p_name", "Bob");
Page updated
Report abuse