CODEWITHSUNDEEP
javascripthtmlcss
Zayed AL-Jalahma
Zayed AL-Jalahma

Reputation: 5

Trying to change the id of an element with Javascript

I am trying to change the id of a div whenever I hover over a selection in my navbar. I just can't see where my problem is. When I inspect the page and hover over the navbar selections, the div id is not changing.

This is my javascript:

// Run JS after contents are loaded
document.addEventListener("DOMContentLoaded", initialiseWebPage);


function initialiseWebPage() //Loads DOM content
{
  var navImage = document.getElementById("picture");

  // Variables for each Nav Selection
  const home = document.getElementById("Home");
  const portfolio = document.getElementsById("Portfolio");
  const services = document.getElementsById("Services");
  const achievements = document.getElementsById("Achievements");
  const hobbies = document.getElementsById("Hobbies");

// Event listeners
home.addEventListener("mouseover", changeIdHome);
portfolio.addEventListener("mouseover", changeIdPortfolio);
services.addEventListener("click", changeIdServices);
achievements.addEventListener("mouseover", changeIdAchievements);
hobbies.addEventListener("mouseover", changeIdHobbies);


function changeIdHome()
{
  navImag.id = "Home";
}

function changeIdPortfolio()
{
  navImage.id = "Portfolio";
}

function changeIdServices()
{
  navImage.id = "Services";
}

function changeIdAchievements()
{
  navImage.id = "Achievements";
}

function changeIdHobbies()
{
  navImage.id = "Hobbies";
}

}

This is the beginning of my HTML:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Website</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
    <script src="Script.js"></script> <!-- Link document to javascript file -->
    <link href="style.css" rel="stylesheet">
    <link rel="stylesheet" href="https://m.w3newbie.com/you-tube.css">
</head>

<body>

    <!-- Navigation -->

    <div class="container-fluid">
        <div id="picture">

I am pretty sure I linked my js correctly to my html.

as you can see at the bottom of the HTML, the div that im trying to play around has the id of "picture".

Upvotes: 0

Views: 63

Answers (2)

Ritesh Khandekar
Ritesh Khandekar

Reputation: 4005

Every element should have unique id.

You can't get array from one element:

document.getElementsById()

So just replace it with:

document.getElementById()

Upvotes: 0

Ameer
Ameer

Reputation: 2000

I can't 100% confirm this, however, on many of your constants you used document.getElementsById and it's supposed to be document.getElementById.

Heres the changed JavaScript code

document.addEventListener("DOMContentLoaded", initialiseWebPage);


function initialiseWebPage() //Loads DOM content
{
  var navImage = document.getElementById("picture");

  // Variables for each Nav Selection
  const home = document.getElementById("Home");
  const portfolio = document.getElementById("Portfolio");
  const services = document.getElementById("Services");
  const achievements = document.getElementById("Achievements");
  const hobbies = document.getElementById("Hobbies");

// Event listeners
home.addEventListener("mouseover", changeIdHome);
portfolio.addEventListener("mouseover", changeIdPortfolio);
services.addEventListener("click", changeIdServices);
achievements.addEventListener("mouseover", changeIdAchievements);
hobbies.addEventListener("mouseover", changeIdHobbies);


function changeIdHome()
{
  navImag.id = "Home";
}

function changeIdPortfolio()
{
  navImage.id = "Portfolio";
}

function changeIdServices()
{
  navImage.id = "Services";
}

function changeIdAchievements()
{
  navImage.id = "Achievements";
}

function changeIdHobbies()
{
  navImage.id = "Hobbies";
}

}

I hope this helps!

Upvotes: 1

Related Questions