(js) => blog

Accessing HTML 1

Page section: playground
TAGS: The DOM
More on The DOM

Bits of code for manipulating the DOM

These are methods: 
document.getElementById()
document.querySelector()

document.getElementsByClassName()
document.getElementsByTagName()
document.querySelectorAll()
And these are properties: 
.innerHTML

The innerHTML property can be used to get or change any HTML element, including <html> and <body>.

adding and event listener.

Older things...

  • uses a for loop to use array items to populate an HTML list.
  • does the same but adds to a paragraph (below) using fauna.join(' and ').
  • collect favourite animals and lists them below.
  • just uses console.log(fauna);
  • destroys the whole page.
  • First animal goes here.
  • Second animal goes here.
  • Third animal goes here.
  • Fourth animal goes here.
  • Fifth animal goes here.

Current list of fauna:

Using: 
function paragraphList() {
for (let i = 0; i < fauna.length; i++) { // let fauna=fauna[i].toUpperCase();
    document.getElementById("plist").innerHTML=fauna.join(' and ');
    }
}

quick test

Push to test external html.js file is working:

The idea

Is to get a list from an array into a paragraph with line breaks using <br>.

The code:

function myList() {
    let fauna = ["bear", "ox", "tiger", "gallimimus", "geoduck"];
    for (let i = 0; i < fauna.length; i++) {
        document.getElementById("animals" + i).innerHTML = fauna[i] + "<br>";
        // boo = fauna;
    }
    alert("Each paragraph is given a different ID.");
}

Need some way to add to each time rather than replace.

Link

This is from W3 schools on output...

View contents of: /static/js/html.js 
function test() {
    alert('this is working');
}

function wasp() {
    document.getElementById("wasp").addEventListener("click", displayDate);
}







// Older stuff on page

let fauna = ["bear", "ox", "tiger", "gallimimus", "geoduck"];
function myList() {
    for (let i = 0; i < fauna.length; i++) {
        document.getElementById("animals" + i).innerHTML = fauna[i] + "<br>";
        // boo = fauna;
    }
    alert("Each list item is given a different ID.");
}

function paragraphList() {
    for (let i = 0; i < fauna.length; i++) {
        // let fauna = fauna[i].toUpperCase();
        document.getElementById("plist").innerHTML = fauna.join(' and ');
    }
}

function docWrite() {
    let fruit = ["apple", "orange", "parsnip", "gravy"];
    document.write(`<body style="background:#010082; color: #ccc"><div style="display:grid; place-items:center; height: 96vh; font-family: 'Lucida console', monospace"><p style="font-size: 12em; line-height: 0.1; color: #fff">Fuuuuuk!!</p><p>That's done it. The system is destroyed. Please vacate the premises immediately</p></div></body>`);
    alert("BOOOM!!!");
}
function fav() {
    let favs = [];
    fav1 = prompt("fave animal?.");
    fav2 = prompt("Second fave animal?.");
    fav3 = prompt("Third fave animal?.");
    favs = [fav1, fav2, fav3];
    alert('Your favourites are: ' + favs);
    for (let i = 0; i < 3; i++) {
        document.getElementById('plist').innerHTML = favs.join(' and ');
    }

}

function cLog() {
    let fauna = ["bear", "ox", "tiger", "gallimimus"];
    console.log(fauna);
}