I was practicing interactivity with inputs and buttons, but no matter what I did, the script file didn’t connect or just didn’t do anything with the connected function.
Link of the website: https://yg5xem.mimo.run/index.html
HTML Code:
<!doctype html>
Testing
My New Playground
Here, I’ll test some of the stuff I’ve practiced!
Some Sites:
Youtube
Roblox
Change Links
- Speedcubing
- Eating
- Trampolining
Things I like to do:
Gaming
More Information
Add
CSS Code:
body {
background-color: orange;
color: black;
}
.sitelinks {
font-size: 20px;
background-color: white;
border: solid 3px black;
padding: 10px 15px 10px 15px;
border-radius: 10px;
margin-left: 20px;
}
#title {
text-align: center;
margin: 25px 75px 25px 75px;
border: solid 3px white;
border-radius: 10px;
background-color: white;
border: solid 4px black;
padding: 10px;
}
p {
background-color: white;
border: solid 3px black;
border-radius: 8px;
text-align: center;
}
ul {
background-color: white;
border: solid 3px black;
border-radius: 8px;
margin: 15px 25px 5px 25px;
}
.linksAndHobbies {
font-size: 20px;
background-color: white;
border: solid 3px black;
padding: 10px 15px 10px 15px;
border-radius: 10px;
margin: 5px 100px 10px 100px;
text-align: center;
}
.addHobbie {
font-size: 20px;
background-color: white;
border: solid 3px black;
border-radius: 10px;
margin: 5px;
text-align: center;
}
Javascript Code:
function changeLinks() {
const roblox = document
.getElementById(“roblox”);
roblox.innerHTML =
“https://www.roblox.com/home/”;
const youtube = document
.getElementById(“youtube”);
youtube.innerHTML =
“https://www.youtube.com”;
}
function moreInformation() {
const hobbies = document
.querySelectorAll(“li”);
if (hobbies[0].innerHTML ===
“Gaming”) {
hobbies “Gaming (Main game: FE2)”;
}
if (hobbies[1].innerHTML ===
“Speedcubing”) {
hobbies[1].innerHTML =
“Speedcubing (Cube: MoYu RS3M 2023)”;
}
if (hobbies[2].innerHTML ===
“Eating”) {
hobbies[2].innerHTML =
“Eating (I love potatoes)”;
}
if (hobbies[3].innerHTML ===
“Trampolining”) {
hobbies[3].innerHTML =
“Trampolining (I’ve went to Jumpers)”;
}
}
function addHobbie() {
const hobbie = document
.querySelector(“.addHobbie”).value;
const orderInput = document
.querySelectorAll(“.addHobbie”);
let order = orderInput[1].value;
order -= 1;
const listItems = document
.querySelectorAll(“li”);
listItems[order].innerHTML = hobbie;
}
I tried putting console.log right in the start, but not even that ran.
The code in the first button is supposed to change the text of the first and second links to its non-hyperlink version.
The second button, just added more text to the list items.
In the third, there were 2 inputs, 1st to put the text to add, and the 2nd to put the order of the list item.
Note: if there is something that isn’t that optimised, but still works, don’t mind, I’m stll learning. (That is why it’s in MiMo)