尝试使用Javascript更改元素的id_Javascript_Html_Css

尝试使用Javascript更改元素的id

javascript html css

尝试使用Javascript更改元素的id,javascript,html,css,Javascript,Html,Css,每当我将鼠标悬停在导航栏中的某个选项上时，我都试图更改div的id。我就是看不出我的问题在哪里。当我检查页面并将鼠标悬停在导航栏选项上时，div id没有改变这是我的javascript： // Run JS after contents are loaded document.addEventListener("DOMContentLoaded", initialiseWebPage); function initialiseWebPage() //Loads DOM content {

每当我将鼠标悬停在导航栏中的某个选项上时，我都试图更改div的id。我就是看不出我的问题在哪里。当我检查页面并将鼠标悬停在导航栏选项上时，div id没有改变

这是我的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";
}

}

这是我的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">

我很确定我的js与html链接正确

正如您在HTML底部所看到的，我尝试使用的div的id是picture。

我无法100%确认这一点，但是，在许多常量上，您使用了document.getElementsById，它应该是document.getElementById

下面是更改后的JavaScript代码

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

}

我希望这有帮助

每个元素都应该有唯一的id

无法从一个元素获取数组：

document.getElementsById()

因此，只需将其替换为：

document.getElementById()

哦，伙计，编码的好处是：D。谢谢你们，原来是GetElementsByd中的额外“s”。我都没注意到！