相同的 javascript 不适用于类似的元素答案

【问题标题】：same javascript not working on similar elements相同的 javascript 不适用于类似的元素
【发布时间】：2021-11-24 02:21:49
【问题描述】：

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>

【问题讨论】：

问题中的随机文本绝不是一个好主意。
你有没有试过console.log比较之前x.style.color的值？
您包含了大量看起来与您的问题无关的 CSS，这使得想要帮助您的人花费额外的精力来调查不相关的内容。您还包含指向外部 css 和 js 文件的链接，由于我们现在不知道它们包含的内容，因此我们不知道它们如何影响您的问题。将您的问题隔离并简化为导致问题的相关部分，在许多情况下，您可能会在这样做时自己发现问题的原因。
我认为我应该提供所有详细信息，所以我也提供了 css 重置代码和随机文本，以便我可以发布它，否则它也不允许我......我会保留这些牢记细节
@A_A 你能说明你的意思吗

标签： javascript html css colors textcolor

【解决方案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 封装在first_name 中的<h1> 中。当您更改first_name 的属性时，它们将同时应用于last_name。虽然它适用于这种情况，但如果您的需求发生轻微变化，它可能会产生意想不到的后果。因此，将两者拆分为独立元素（两个 <span>s）并没有什么坏处。

【讨论】：

兄弟这根本不起作用....它与我上面给出的替代代码相同
@HarshS11 是否工作 = 改变名字和姓氏的颜色，从白色/黄色到黄色/白色？
它应该不断地交换颜色
这个答案，虽然它模仿了 OP 的第一次尝试，但似乎并没有做 OP 真正想要的（为元素交换两种 css 颜色）。相反，它会设置一种颜色，然后每五秒连续设置另一种颜色。不太确定为什么要不断设置不变的颜色。更不用说OP要求解释的事实，这只是一个代码转储。它甚至没有 cmets。
@Daedalus 我其实这只是整个代码的一部分......它符合不断变化的主题