same javascript 不处理相似的元素

Question

IDK 为什么，但脚本适用于 #last_name 而不是 #first_name

last_name 是应该的，但不是 first_name 请解释解决方案，我检查了代码并尽力了。

//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>

Answer 1

怎么样：

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>

解释：

要不断地交换颜色，你需要一个标志来指示它是在状态A还是在状态B。我使用的标志被命名为whitefirst。
每次迭代后，您都必须切换标志。我通过简单地否定它来做到这一点，所以如果它是真的它就变成假的，如果它是假的它就变成真的。
您将 last_name 封装在 <h1> 中的 first_name 中。当您更改 first_name 的属性时，它们将同时应用于 last_name。虽然它适用于此实例，但如果您的要求发生轻微变化，它可能会产生意想不到的后果。因此，将两者拆分为独立元素（两个 <span>s）没有害处。

same javascript 不处理相似的元素

same javascript not working on similar elements

javascript

html

css

colors

textcolor