same javascript not working on similar elements-CodePudding

IDK why, but the script is working for #last_name and not for #first_name

last_name is just as it is supposed to be, but not the first_name Please explain the solution, I inspected the code and did all I could.

//i also worked on an alternative code but it only worked one time:
//here is the code that worked only once 

let first_name = document.getElementById("first_name");
let last_name = document.getElementById("last_name");
const color_swap = () => {
  first_name.style.color = "rgb(255,255,255)";
  last_name.style.color = "rgb(254, 215, 3)";
  setInterval(() => {
    first_name.style.color = "rgb(254, 215, 3)";
    last_name.style.color = "rgb(255,255,255)";
  }, 2000);
};
window.addEventListener("load", color_swap);


//so how do i iterate it?

// ---------home----------
let first_name = document.getElementById('first_name');
let last_name = document.getElementById('last_name');
first_name.style.color = 'rgb(255,255,255)';
const color_swap = () => setInterval(()=>{
    first_name.style.color = first_name.style.color == 'rgb(255,255,255)' ? 'rgb(254, 215, 3)' : 'rgb(255,255,255)';
    last_name.style.color = last_name.style.color == 'rgb(254, 215, 3)' ? 'rgb(255,255,255)' : 'rgb(254, 215, 3)';
},1000);
window.addEventListener('load', color_swap);

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");
/* ---------------css reset------------ */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/*-----------------------------*/
.home {
  height: 35rem;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0rem 12rem;
}
.text h1{
  margin: 2rem 0rem;
  font-size: 4rem;
}
.text p {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 200;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <script
      src="https://kit.fontawesome.com/7a300e81b2.js"
      crossorigin="anonymous"
    ></script>
    <title>Portfolio</title>
  </head>
  <body>
    <div class="home" id="home">
      <div class="text">
        <p>Hi, I am</p>
        <h1 id="first_name">Harsh <span id="last_name">Sunwani</span></h1>
        <p>A Web Developer in Training</p>
      </div>
    </div>
  </body>
  <script src="script.js"></script>
</html>

CodePudding user response：

How about:

let first_name = document.getElementById("first_name");
let last_name = document.getElementById("last_name");
const color_swap = () => {
  let whitefirst = true;
  setInterval(() => {
    if (whitefirst) {
      first_name.style.color = "rgb(254, 215, 3)";
      last_name.style.color = "rgb(255,255,255)";
    } else {
      first_name.style.color = "rgb(255,255,255)";
      last_name.style.color = "rgb(254, 215, 3)";
    }
    whitefirst = !whitefirst;
  }, 2000);
};

window.addEventListener("load", color_swap);

.home {
  height: 20rem;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0rem 2rem;
}
.text h1{
  margin: 2rem 0rem;
  font-size: 4rem;
}
.text p {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 200;
}

<div class="home" id="home">
  <div class="text">
    <p>Hi, I am</p>
    <h1>
      <span id="first_name" style="color:white">Harsh</span>
      <span id="last_name" style="color:#fed703">Sunwani</span>
    </h1>
    <p>A Web Developer in Training</p>
  </div>
</div>

Explanation:

To swap colors continuously, you need a flag to indicate whether it is in state A or in state B. The flag I use is named whitefirst.
After each iteration, you have to toggle the flag. I do it by simply negating it, so if it is true it becomes false, and if it is false it becomes true.
You encapsulate last_name within first_name in <h1>. When you change the properties of first_name, they will apply to last_name at the same time. While it works for this instance, it might have unintended consequence if your requirements change even slightly. So, no harm splitting the two as independent elements (two <span>s).