OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

While adding interactivity to a website, the javascript file doesn't seem to be linking

  • Thread starter Thread starter MistyKing
  • Start date Start date
M

MistyKing

Guest
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


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;
}

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;
}

Code:
<!doctype html>
<html>
<head>
  <link rel="stylesheet" href="style.css" />
  <title>Testing</title>
</head>

<h1 id="title">My New Playground</h1>

<p style="margin: 0 10px 15px 10px">Here, I'll test some of the stuff I've practiced!<br>Some Sites:</p><br>
<a class="sitelinks" href="https://www.youtube.com" id="youtube">Youtube</a><br><br><br>
<a class="sitelinks" id="roblox" href="https://www.roblox.com/home/">Roblox</a><br><br>

<button onclick="changeLinks()" class="linksAndHobbies">Change Links</button>

<ul>
  <br><span>Things I like to do:</span><br>
  
  <li style="margin-top: 10px">Gaming</li>
  <li>Speedcubing</li>
  <li>Eating</li>
  <li>Trampolining</li><br>
</ul>

<button onclick="moreInformation()" class="linksAndHobbies">More Information</button>

<input class="addHobbie" type="text" placeholder="Hobbie"></input><input class="addHobbie" type="text" placeholder="Number (1-4)"><button onclick="addHobbie()" class="addHobbie">Add</button>

<script src="script.js"></script>

</body>

</html>

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)

<p>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.</p>
<p>Link of the website: <a href="https://yg5xem.mimo.run/index.html" rel="nofollow noreferrer">https://yg5xem.mimo.run/index.html</a></p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><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;
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<title>Testing</title>
</head>

<h1 id="title">My New Playground</h1>

<p style="margin: 0 10px 15px 10px">Here, I'll test some of the stuff I've practiced!<br>Some Sites:</p><br>
<a class="sitelinks" href="https://www.youtube.com" id="youtube">Youtube</a><br><br><br>
<a class="sitelinks" id="roblox" href="https://www.roblox.com/home/">Roblox</a><br><br>

<button onclick="changeLinks()" class="linksAndHobbies">Change Links</button>

<ul>
<br><span>Things I like to do:</span><br>

<li style="margin-top: 10px">Gaming</li>
<li>Speedcubing</li>
<li>Eating</li>
<li>Trampolining</li><br>
</ul>

<button onclick="moreInformation()" class="linksAndHobbies">More Information</button>

<input class="addHobbie" type="text" placeholder="Hobbie"></input><input class="addHobbie" type="text" placeholder="Number (1-4)"><button onclick="addHobbie()" class="addHobbie">Add</button>

<script src="script.js"></script>

</body>

</html></code></pre>
</div>
</div>
</p>
<p>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)</p>
 

Latest posts

Top