Html - JavaScript errors after multiple onmouseover calls

KawkaGaming
July 4, 2023
101 views
0 votes
2 Answers

function langPicker(buttonid) {
  animationForwarder('sectionlang1', 'sectionlang2', 'anim-switchByFadeIn-lang', 100)
  setTimeout(langTextChange, 625, buttonid);
}

function langTextChange(buttonid) {
  const subject1 = document.getElementById('sectionlang1');
  const subject2 = document.getElementById('sectionlang2');
  if (buttonid == 'cpp') {
    subject1.textContent = 'C++';
    subject2.textContent = 'C++ is one of the most renowned programming languages in the world';
  }
}

function anFrwdDoubleExec(identifier, identifier2, identifier3, identifier4, anim_id, wait_time, anim_id2, wait_time2, secondExecutionWaitTime) {
  animationForwarder(identifier, identifier2, anim_id, wait_time);
  setTimeout(() => {
    animationForwarder(identifier3, identifier4, anim_id2, wait_time2)
  }, secondExecutionWaitTime);
}

function animationForwarder(identifier, identifier2, anim_id, wait_time) {
  document.getElementById(identifier).classList.add(anim_id);
  if (identifier2 != 'skip') {
    setTimeout(() => {
      document.getElementById(identifier2).classList.add(anim_id)
    }, wait_time);
  }
}

.nonstandard-draft {
  max-width: 15vw;
  position: fixed;
  bottom: 1.7vw;
  right: 1.7vw;
}

.nonstandard-draft-head {
  font-size: 1.7vw;
  display: inline-block;
  font-family: Belanosima;
  margin: 0 0 1.2vw 0;
}

.nonstandard-draft-data {
  font-family: Belanosima;
  font-size: 1vw;
  white-space: pre-line;
  color: #0d8569;
  filter: drop-shadow(0.1vw 0.1vw 0.2vw black);
}

.grd-draft1 {
  background-image: linear-gradient(to right bottom, #f269e0, #ff5d9a, #ff864b, #ffbd00, #a8eb12);
  filter: drop-shadow(0vw 0vw 0.1vw #ff864b);
}

.grd-draft2 {
  background-image: linear-gradient(to right bottom, #8f00ff, #007aff, #0091ef, #009994, #009950);
  filter: drop-shadow(0vw 0vw 0.1vw #0091ef);
}

.w-100p {
  width: 100%;
}

.w-97p {
  width: 97%;
}

.w-14p75 {
  width: 14.75vw;
}

.w-9p5 {
  width: 9.5vw;
}

.h-100p {
  height: 100%;
}

.header {
  background-image: url('../RESOURCES/bgs/bg12.gif');
  height: 100vh;
}

.fx {
  display: flex;
}

.fx-jc-spb {
  justify-content: space-between;
}

.fx-ai-c {
  align-items: center;
}

.fx-jc-c {
  justify-content: center;
}

.fx-dir-c {
  flex-direction: column;
}

.mg-none {
  margin: 0;
}

#headertext {
  width: 0vw;
  overflow: hidden;
}

.headertexttransformed {
  width: 48.5709375vw !important;
  transition: all 0.5s ease-in;
}

.b-sh-def {
  box-shadow: 0vw 0vw 0.3vw grey;
}

.bgs-full {
  background-size: 100% 100%, 100% 100%;
}

.headerimage {
  width: 12vw;
  margin-right: 3.25vw;
  image-rendering: pixelated;
}

.headergradienttext {
  white-space: nowrap;
  font-size: 3vw;
}

.ff-raleway {
  font-family: Raleway;
}

.grd-firsth1 {
  background-image: linear-gradient(to right bottom, #000000, #202020, #3a3a3a, #565656, #747474);
  filter: drop-shadow(0.1vw 0.1vw 0.01vw #3a3a3a);
}

.grd-sech1 {
  background-image: linear-gradient(to right bottom, #00e377, #00e395, #00e2af, #00e1c3, #00ded3);
  filter: drop-shadow(0.1vw 0.1vw 0.01vw #00e377);
}

.gradient-text {
  background-clip: text;
  -webkit-background-clip: text;
  -o-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -o-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}

.fc-violet {
  color: blueviolet;
}

.nav {
  position: fixed;
  background-color: white;
  top: 1vw;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 10vw;
  z-index: 1;
}

.dp-none {
  display: none;
}

.wh-animelem-1 {
  width: 1.5vw;
  height: 1.5vw;
}

.wh-animelem-1-addr-1 {
  top: -2vw;
  left: -2vw;
}

.wh-animelem-1-addr-2 {
  bottom: -2vw;
  right: -2vw;
  transform: rotate(180deg);
}

.headercontainer {
  margin: 3.25vw;
}

.fsz-1 {
  font-size: 1vw;
}

@keyframes anim1 {
  0% {
    opacity: 0;
  }
  33.3% {
    opacity: 1;
  }
  66.6% {
    opacity: 0;
  }
  99.9% {
    opacity: 1;
  }
}

.abm-section {
  height: 74vh;
  padding: 10vh 0;
}

.bs-bb {
  box-sizing: border-box;
}

.anim-1 {
  animation: anim1 0.25s ease-in-out;
}

.nest-subsection {
  width: 80vw;
  max-width: 1250px;
}

.general-subsection {
  max-height: calc(70vh - 80px);
}

.add-text-subsection {
  font-family: Belanosima;
}

.t-ss-heading {
  font-size: 48px;
  margin-bottom: 32px;
}

.t-ss-paragraph {
  font-size: 34px;
  filter: drop-shadow(0.2vw 0.2vw 0.1vw #a6a6a6);
}

.t-ss-paragraph-modabm {
  max-width: 671.438px;
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.anim-blink {
  animation: blink 1.25s infinite;
}

.pfp {
  height: 340px;
  width: auto;
  border-radius: 15%;
  margin-left: 70px;
}

@keyframes fadeInTR {
  from {
    transform: translateX(-75px);
  }
  to {
    opacity: 1;
  }
}

.anim-fadeintr {
  animation: fadeInTR 0.75s ease-out forwards;
}

.scroll-alternative {
  overflow-y: scroll;
}

.scroll-alternative::-webkit-scrollbar {
  display: none;
}

.op-0 {
  opacity: 0;
}

.border {
  height: 40px;
  background: url('../RESOURCES/SHWHP_RES/greeceborder.png'), white;
  background-size: contain;
}

.abm-bgp {
  background: url('../RESOURCES/SHWHP_RES/bg-content/bg-master.png'), white;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: bottom left;
}

.longsec-child-preset {
  height: 70vh;
  color: #f3f3f3;
}

.general-heading {
  font-size: 54px;
}

.add-lang-paragraph {
  text-align: left;
  font-size: 24px;
  margin-top: 30px;
}

@keyframes fadeInTB {
  from {
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
  }
}

.anim-fadeintb {
  animation: fadeInTB 0.75s cubic-bezier(.2, 1, 1, 1) forwards;
}

.bg-long {
  background-image: url('../RESOURCES/bgs/bg14.jpg');
}

.longer-subsection {
  max-height: 100%;
}

.lang-pick {
  width: 225px;
  height: 225px;
  padding: 20px;
  flex-wrap: wrap;
  transform: rotate(45deg);
}

.lang-pick-opt {
  width: 94px;
  height: 94px;
  margin: 9.25px;
  border-radius: 12px;
  flex-shrink: 0;
}

.cpp {
  background-image: radial-gradient(circle, #5ffbf1, #64fcec, #69fde7, #6ffde1, #76fedc, #83fed7, #8fffd3, #9affcf, #abffcd, #baffcc, #c7ffcc, #d3ffce);
}

.cpp::before {
  content: '';
  width: 71.27659574468085%;
  height: 6px;
  transform: scaleX(0);
  transform-origin: left;
  position: absolute;
  top: -20px;
  left: -20px;
  background-color: #08fcbc;
  transition: transform 0.1s ease-in;
}

.lang-pick:hover .cpp::before {
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.1s ease-out;
}

.cpp::after {
  content: '';
  width: 6px;
  height: 71.27659574468085%;
  transform: scaleY(0);
  transform-origin: top;
  position: absolute;
  top: -20px;
  left: -20px;
  background-color: #08fcbc;
  transition: transform 0.1s ease-in;
}

.lang-pick:hover .cpp::after {
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 0.1s ease-out;
}

.html {
  background-image: radial-gradient(circle, #e28ef6, #d884f4, #ce7af2, #c470f0, #b867ef, #af66ef, #a564f0, #9b63f0, #9168f2, #876df4, #7d72f5, #7376f5);
}

.html::before {
  content: '';
  width: 71.27659574468085%;
  height: 6px;
  transform: scaleX(0);
  transform-origin: right;
  position: absolute;
  top: -20px;
  right: -20px;
  background-color: #08fcbc;
  transition: transform 0.1s ease-in;
}

.lang-pick:hover .html::before {
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.1s ease-out;
}

.html::after {
  content: '';
  width: 6px;
  height: 71.27659574468085%;
  transform: scaleY(0);
  transform-origin: top;
  position: absolute;
  top: -20px;
  right: -20px;
  background-color: #08fcbc;
  transition: transform 0.1s ease-in;
}

.lang-pick:hover .html::after {
  transform: scaleY(1);
  transform-origin: top;
  transition: transform 0.1s ease-out;
}

.css {
  background-image: radial-gradient(circle, #5ffbf1, #46eefa, #41dfff, #52cffe, #69bff8, #79b3f4, #8aa7ec, #9a9ae1, #aa8fd8, #ba83ca, #c777b9, #d16ba5);
}

.css::before {
  content: '';
  width: 71.27659574468085%;
  height: 6px;
  transform: scaleX(0);
  transform-origin: left;
  position: absolute;
  bottom: -20px;
  left: -20px;
  background-color: #08fcbc;
  transition: transform 0.1s ease-in;
}

.lang-pick:hover .css::before {
  transform: scaleX(1);
  transform-origin: left;
  transition: transform 0.1s ease-out;
}

.css::after {
  content: '';
  width: 6px;
  height: 71.27659574468085%;
  transform: scaleY(0);
  transform-origin: bottom;
  position: absolute;
  bottom: -20px;
  left: -20px;
  background-color: #08fcbc;
  transition: transform 0.1s ease-in;
}

.lang-pick:hover .css::after {
  transform: scaleY(1);
  transform-origin: bottom;
  transition: transform 0.1s ease-out;
}

.js {
  background-image: radial-gradient(circle, #b1ff00, #90ff4e, #6eff76, #4dff97, #2affb4, #4bf6a6, #5eee98, #6ce58c, #8fcf5b, #a9b72f, #be9c05, #ce7e00);
}

.js::before {
  content: '';
  width: 71.27659574468085%;
  height: 6px;
  transform: scaleX(0);
  transform-origin: right;
  position: absolute;
  bottom: -20px;
  right: -20px;
  background-color: #08fcbc;
  transition: transform 0.1s ease-out;
}

.lang-pick:hover .js::before {
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.1s ease-out;
}

.js::after {
  content: '';
  width: 6px;
  height: 71.27659574468085%;
  transform: scaleY(0);
  transform-origin: bottom;
  position: absolute;
  bottom: -20px;
  right: -20px;
  background-color: #08fcbc;
  transition: transform 0.1s ease-out;
}

.lang-pick:hover .js::after {
  transform: scaleY(1);
  transform-origin: bottom;
  transition: transform 0.1s ease-out;
}

.cur-sel {
  cursor: pointer;
}

.whp-icon {
  width: 74%;
  height: 74%;
  transition: all 0.15s;
}

.whp-icon:hover {
  width: 80%;
  height: 80%;
  transition: all 0.15s;
}

.pos-abs {
  position: absolute;
}

.p-ab-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pos-rel {
  position: relative;
}

.anim-switchByFadeIn-lang {
  animation: switchByFadeIn-lang 1.25s ease-in forwards;
}

@keyframes switchByFadeIn-lang {
  50% {
    transform: translateX(75px);
    opacity: 0;
  }
  50.001% {
    transform: translateX(-150px);
  }
  100.001% {
    transform: translateX(75px);
    opacity: 1;
  }
}

<section onmouseover="anFrwdDoubleExec('sectionlang1', 'sectionlang2', 'slash1-lang', 'slash2-lang', 'anim-fadeintb', 250, 'anim-blink', 100, 0)" class="longsec-child-preset w-100p fx fx-jc-c fx-ai-c fx-dir-c">
  <div class="nest-subsection fx fx-jc-spb fx-ai-c">
    <div class="longer-subsection add-text-subsection fx-dir-c bs-bb">
      <h1 id="sectionlang1" class="mg-none general-heading underline-marker op-0"><span id="slash1-lang">/</span><span id="slash2-lang">/</span> Languages: the keys</h1>
      <p id="sectionlang2" class="t-ss-paragraph t-ss-paragraph-modabm add-lang-paragraph ff-raleway mg-none op-0">Languages serve as my trump cards: they are like limbs for every programmer. And I am no exception! Here you can review the aforementioned.</p>
    </div>

    <div class="lang-pick fx">
      <div onclick="langPicker('cpp')" class="lang-pick-opt bgs-full cpp pos-rel cur-sel">
        <img src="RESOURCES/SHWHP_RES/cpp_b&w.png" class="whp-icon pos-abs p-ab-center" alt="C++">
      </div>
      <div class="lang-pick-opt bgs-full html pos-rel cur-sel">
        <img src="RESOURCES/SHWHP_RES/html_b&w.png" class="whp-icon pos-abs p-ab-center" alt="HTML">
      </div>
      <div class="lang-pick-opt bgs-full css pos-rel cur-sel">
        <img src="RESOURCES/SHWHP_RES/css_b&w.png" class="whp-icon pos-abs p-ab-center" alt="CSS">
      </div>
      <div class="lang-pick-opt bgs-full js pos-rel cur-sel">
        <img src="RESOURCES/SHWHP_RES/js_b&w.png" class="whp-icon pos-abs p-ab-center" alt="JS">
      </div>
    </div>
  </div>
</section>

Basically, I wanted to share with you a question: why the js breaks after multiple onmouseover calls over an element? The code snippet’s below to ease the error’s identification (log also below).

Uncaught TypeError: Cannot read properties of null (reading ‘classList’)

What I had tried before posting this:

Checking for any mistakes in the values;
Analyzing the function body;
Asking GPT.

No results for me.

Answers

Seems you are trying to use setTimeout as sleep sync function. Unfortunately you cannot do that, so you should use a promise to wait until setTimeout executes its callback. Othewise you have kinda callback mess that don’t sync with each other.

With async/await it’s easily manageable:

const timeout = async (fn, ...args) => new Promise(resolve => setTimeout(() => fn() + resolve(), ...args))

async function langPicker(buttonid){
    await animationForwarder('sectionlang1', 'sectionlang2', 'anim-switchByFadeIn-lang', 100)
    return timeout(langTextChange, 625, buttonid);
}
function langTextChange(buttonid){
    const subject1 = document.getElementById('sectionlang1');
    const subject2 = document.getElementById('sectionlang2');
    if(buttonid == 'cpp'){
        subject1.textContent = 'C++';
        subject2.textContent = 'C++ is one of the most renowned programming languages in the world';
    }
}
async function anFrwdDoubleExec(identifier, identifier2, identifier3, identifier4 ,anim_id, wait_time, anim_id2, wait_time2, secondExecutionWaitTime){
    await animationForwarder(identifier, identifier2, anim_id, wait_time);
    return timeout(() => animationForwarder(identifier3, identifier4, anim_id2, wait_time2), secondExecutionWaitTime);
}

function animationForwarder(identifier, identifier2, anim_id, wait_time){
    document.getElementById(identifier).classList.add(anim_id);
    if(identifier2 != 'skip'){
        return timeout(() => document.getElementById(identifier2).classList.add(anim_id), wait_time);
    }
}

.nonstandard-draft{
    max-width: 15vw;
    position: fixed;
    bottom: 1.7vw;
    right: 1.7vw;
}
.nonstandard-draft-head{
    font-size: 1.7vw;
    display: inline-block;
    font-family: Belanosima;
    margin: 0 0 1.2vw 0;
}
.nonstandard-draft-data{
    font-family: Belanosima;
    font-size: 1vw;
    white-space: pre-line;
    color: #0d8569;
    filter: drop-shadow(0.1vw 0.1vw 0.2vw black);
}
.grd-draft1{
    background-image: linear-gradient(to right bottom, #f269e0, #ff5d9a, #ff864b, #ffbd00, #a8eb12);
    filter: drop-shadow(0vw 0vw 0.1vw #ff864b);
}
.grd-draft2{
    background-image: linear-gradient(to right bottom, #8f00ff, #007aff, #0091ef, #009994, #009950);
    filter: drop-shadow(0vw 0vw 0.1vw #0091ef);
}

.w-100p{
    width: 100%;
}
.w-97p{
    width: 97%;
}
.w-14p75{
    width: 14.75vw;
}
.w-9p5{
    width: 9.5vw;
}
.h-100p{
    height: 100%;
}
.header{
    background-image: url('../RESOURCES/bgs/bg12.gif');
    height: 100vh;
}
.fx{
    display: flex;
}
.fx-jc-spb{
    justify-content: space-between;
}
.fx-ai-c{
    align-items: center;
}
.fx-jc-c{
    justify-content: center;
}
.fx-dir-c{
    flex-direction: column;
}
.mg-none{
    margin: 0;
}
#headertext{
    width: 0vw;
    overflow: hidden;
}
.headertexttransformed{
    width: 48.5709375vw !important;
    transition: all 0.5s ease-in;
}  
.b-sh-def{
    box-shadow: 0vw 0vw 0.3vw grey;
}
.bgs-full{
    background-size: 100% 100%, 100% 100%;
}
.headerimage{
    width: 12vw;
    margin-right: 3.25vw;
    image-rendering: pixelated;
}
.headergradienttext{
    white-space: nowrap;
    font-size: 3vw;
}
.ff-raleway{
    font-family: Raleway;
}
.grd-firsth1{
    background-image: linear-gradient(to right bottom, #000000, #202020, #3a3a3a, #565656, #747474);
    filter: drop-shadow(0.1vw 0.1vw 0.01vw #3a3a3a);
}
.grd-sech1{
    background-image: linear-gradient(to right bottom, #00e377, #00e395, #00e2af, #00e1c3, #00ded3);
    filter: drop-shadow(0.1vw 0.1vw 0.01vw #00e377);
}
.gradient-text{
    background-clip: text;

    -webkit-background-clip: text;
    -o-background-clip: text;
    -moz-background-clip: text;

    -webkit-text-fill-color: transparent;
    -o-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
}
.fc-violet{
    color: blueviolet;
}
.nav{
    position: fixed;
    background-color: white;
    top: 1vw;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 10vw;
    z-index: 1;
}
.dp-none{
    display: none;
}
.wh-animelem-1{
    width: 1.5vw;
    height: 1.5vw;
}
.wh-animelem-1-addr-1{
    top: -2vw;
    left: -2vw;
}
.wh-animelem-1-addr-2{
    bottom: -2vw;
    right: -2vw;
    transform: rotate(180deg);
}
.headercontainer{
    margin: 3.25vw;
}

.fsz-1{
    font-size: 1vw;
}

@keyframes anim1{
    0%{
        opacity: 0;
    }
    33.3%{
        opacity: 1;
    }
    66.6%{
        opacity: 0;
    }
    99.9%{
        opacity: 1;
    }
}

.abm-section{
    height: 74vh;
    padding: 10vh 0;
}
.bs-bb{
    box-sizing: border-box;
}

.anim-1{
    animation: anim1 0.25s ease-in-out;
}
.nest-subsection{
    width: 80vw;
    max-width: 1250px;
}
.general-subsection{
    max-height: calc(70vh - 80px);
}
.add-text-subsection{
    font-family: Belanosima;
}
.t-ss-heading{
    font-size: 48px;
    margin-bottom: 32px;
}
.t-ss-paragraph{
    font-size: 34px;
    filter: drop-shadow(0.2vw 0.2vw 0.1vw #a6a6a6);
}
.t-ss-paragraph-modabm{
    max-width: 671.438px;
}
@keyframes blink{
    0%{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
.anim-blink{
    animation: blink 1.25s infinite;
}
.pfp{
    height: 340px;
    width: auto;
    border-radius: 15%;
    margin-left: 70px;
}
@keyframes fadeInTR{
    from{
        transform: translateX(-75px);
    }
    to{
        opacity: 1;
    }
}
.anim-fadeintr{
    animation: fadeInTR 0.75s ease-out forwards;
}
.scroll-alternative{
    overflow-y: scroll;
}
.scroll-alternative::-webkit-scrollbar{
    display: none;
}
.op-0{
    opacity: 0;
}
.border{
    height: 40px;
    background: url('../RESOURCES/SHWHP_RES/greeceborder.png'), white;
    background-size: contain;
}
.abm-bgp{
    background: url('../RESOURCES/SHWHP_RES/bg-content/bg-master.png'), white;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: bottom left;
}
.longsec-child-preset{
    height: 70vh;
    color: #f3f3f3;
}
.general-heading{
    font-size: 54px;
}
.add-lang-paragraph{
    text-align: left;
    font-size: 24px;
    margin-top: 30px;
}
@keyframes fadeInTB{
    from{
        transform: translateY(-30px);
    }
    to{
        opacity: 1;
    }
}
.anim-fadeintb{
    animation: fadeInTB 0.75s cubic-bezier(.2,1,1,1) forwards;
}
.bg-long{
    background-image: url('../RESOURCES/bgs/bg14.jpg');
}
.longer-subsection{
    max-height: 100%;
}
.lang-pick{
    width: 225px;
    height: 225px;
    padding:20px;
    flex-wrap: wrap;
    transform: rotate(45deg);
}
.lang-pick-opt{
    width: 94px;
    height: 94px;
    margin: 9.25px;
    border-radius: 12px;
    flex-shrink: 0;
}
.cpp{
    background-image: radial-gradient(circle, #5ffbf1, #64fcec, #69fde7, #6ffde1, #76fedc, #83fed7, #8fffd3, #9affcf, #abffcd, #baffcc, #c7ffcc, #d3ffce);
}
.cpp::before{
    content: '';
    width: 71.27659574468085%;
    height: 6px;
    transform: scaleX(0);
    transform-origin: left;
    position: absolute;
    top: -20px;
    left: -20px;
    background-color: #08fcbc;
    transition: transform 0.1s ease-in;
}
.lang-pick:hover .cpp::before{
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 0.1s ease-out;
}
.cpp::after{
    content: '';
    width: 6px;
    height: 71.27659574468085%;
    transform: scaleY(0);
    transform-origin: top;
    position: absolute;
    top: -20px;
    left: -20px;
    background-color: #08fcbc;
    transition: transform 0.1s ease-in;
}
.lang-pick:hover .cpp::after{
    transform: scaleY(1);
    transform-origin: top;
    transition: transform 0.1s ease-out;
}
.html{
    background-image: radial-gradient(circle, #e28ef6, #d884f4, #ce7af2, #c470f0, #b867ef, #af66ef, #a564f0, #9b63f0, #9168f2, #876df4, #7d72f5, #7376f5);
}
.html::before{
    content: '';
    width: 71.27659574468085%;
    height: 6px;
    transform: scaleX(0);
    transform-origin: right;
    position: absolute;
    top: -20px;
    right: -20px;
    background-color: #08fcbc;
    transition: transform 0.1s ease-in;
}
.lang-pick:hover .html::before{
    transform: scaleX(1);
    transform-origin: right;
    transition: transform 0.1s ease-out;
}
.html::after{
    content: '';
    width: 6px;
    height: 71.27659574468085%;
    transform: scaleY(0);
    transform-origin: top;
    position: absolute;
    top: -20px;
    right: -20px;
    background-color: #08fcbc;
    transition: transform 0.1s ease-in;
}
.lang-pick:hover .html::after{
    transform: scaleY(1);
    transform-origin: top;
    transition: transform 0.1s ease-out;
}
.css{
    background-image: radial-gradient(circle, #5ffbf1, #46eefa, #41dfff, #52cffe, #69bff8, #79b3f4, #8aa7ec, #9a9ae1, #aa8fd8, #ba83ca, #c777b9, #d16ba5);
}
.css::before{
    content: '';
    width: 71.27659574468085%;
    height: 6px;
    transform: scaleX(0);
    transform-origin: left;
    position: absolute;
    bottom: -20px;
    left: -20px;
    background-color: #08fcbc;
    transition: transform 0.1s ease-in;
}
.lang-pick:hover .css::before{
    transform: scaleX(1);
    transform-origin: left;
    transition: transform 0.1s ease-out;
}
.css::after{
    content: '';
    width: 6px;
    height: 71.27659574468085%;
    transform: scaleY(0);
    transform-origin: bottom;
    position: absolute;
    bottom: -20px;
    left: -20px;
    background-color: #08fcbc;
    transition: transform 0.1s ease-in;
}
.lang-pick:hover .css::after{
    transform: scaleY(1);
    transform-origin: bottom;
    transition: transform 0.1s ease-out;
}
.js{
    background-image: radial-gradient(circle, #b1ff00, #90ff4e, #6eff76, #4dff97, #2affb4, #4bf6a6, #5eee98, #6ce58c, #8fcf5b, #a9b72f, #be9c05, #ce7e00);
}
.js::before{
    content: '';
    width: 71.27659574468085%;
    height: 6px;
    transform: scaleX(0);
    transform-origin: right;
    position: absolute;
    bottom: -20px;
    right: -20px;
    background-color: #08fcbc;
    transition: transform 0.1s ease-out;
}
.lang-pick:hover .js::before{
    transform: scaleX(1);
    transform-origin: right;
    transition: transform 0.1s ease-out;
}
.js::after{
    content: '';
    width: 6px;
    height: 71.27659574468085%;
    transform: scaleY(0);
    transform-origin: bottom;
    position: absolute;
    bottom: -20px;
    right: -20px;
    background-color: #08fcbc;
    transition: transform 0.1s ease-out;
}
.lang-pick:hover .js::after{
    transform: scaleY(1);
    transform-origin: bottom;
    transition: transform 0.1s ease-out;
}
.cur-sel{
    cursor: pointer;
}
.whp-icon{
    width: 74%;
    height: 74%;
    transition: all 0.15s;
}
.whp-icon:hover{
    width: 80%;
    height: 80%;
    transition: all 0.15s;
}
.pos-abs{
    position: absolute;
}
.p-ab-center{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.pos-rel{
    position: relative;
}
.anim-switchByFadeIn-lang{
    animation: switchByFadeIn-lang 1.25s ease-in forwards;
}
@keyframes switchByFadeIn-lang{
    50%{
        transform: translateX(75px);
        opacity: 0;
    }
    50.001%{
        transform: translateX(-150px);
    }
    100.001%{
        transform: translateX(75px);
        opacity: 1;
    }
}

<section onmouseover="anFrwdDoubleExec('sectionlang1', 'sectionlang2', 'slash1-lang', 'slash2-lang', 'anim-fadeintb', 250, 'anim-blink', 100, 0)" class="longsec-child-preset w-100p fx fx-jc-c fx-ai-c fx-dir-c">
                <div class="nest-subsection fx fx-jc-spb fx-ai-c">
                    <div class="longer-subsection add-text-subsection fx-dir-c bs-bb">
                        <h1 id="sectionlang1" class="mg-none general-heading underline-marker op-0"><span id="slash1-lang">/</span><span id="slash2-lang">/</span> Languages: the keys</h1>
                        <p id="sectionlang2"class="t-ss-paragraph t-ss-paragraph-modabm add-lang-paragraph ff-raleway mg-none op-0">Languages serve as my trump cards: they are like limbs for every programmer. And I am no exception! Here you can review the aforementioned.</p>
                    </div>
                    
                    <div class="lang-pick fx">
                        <div onclick="langPicker('cpp')" class="lang-pick-opt bgs-full cpp pos-rel cur-sel">
                            <img src="RESOURCES/SHWHP_RES/cpp_b&w.png" class="whp-icon pos-abs p-ab-center" alt="C++">
                        </div>
                        <div class="lang-pick-opt bgs-full html pos-rel cur-sel">
                            <img src="RESOURCES/SHWHP_RES/html_b&w.png" class="whp-icon pos-abs p-ab-center" alt="HTML">
                        </div>
                        <div class="lang-pick-opt bgs-full css pos-rel cur-sel">
                            <img src="RESOURCES/SHWHP_RES/css_b&w.png" class="whp-icon pos-abs p-ab-center" alt="CSS">
                        </div>
                        <div class="lang-pick-opt bgs-full js pos-rel cur-sel">
                            <img src="RESOURCES/SHWHP_RES/js_b&w.png" class="whp-icon pos-abs p-ab-center" alt="JS">
                        </div>
                    </div>
                </div>
            </section>

- Barmar
- July 5, 2023 at 1:38 am
- 0 votes
0
The problem is that you do:
```
    subject1.textContent = 'C++';
    subject2.textContent = 'C++ is one of the most renowned programming languages in the world';
```
subject1 is the <h1 id="sectionlang1" element. This contains <span id="slash1-lang"> and <span id="slash2-lang">. When you replace the <h1> contents, the <span> is removed. So when you later call
```
anFrwdDoubleExec('sectionlang1', 'sectionlang2', 'slash1-lang', 'slash2-lang', 'anim-fadeintb', 250, 'anim-blink', 100, 0)
```
it tries to set the class of slash1-lang and slash2-lang, but they no longer exist so you get an error.

I’m not really sure what you’re trying to accomplish by replacing the contents of these elements. If you just want to prevent the error, check whether document.getElementById() returns anything. So replace
```
document.getElementById(identifier).classList.add(anim_id);
```
with
```
let el = document.getElementById(identifier);
if (el) {
    el.classList.add(anim_id);
}
```
Login or Signup to reply.

Please signup or login to give your own answer.

Click here to cancel reply.

Html – JavaScript errors after multiple onmouseover calls

Answers