Replacing Text using Javascript

20 Views Asked by At

const text5 = document.querySelector('#p3');
text5.textContent = "Hello World";
div#Can span#Orig {
  display: show;
}
div#Can:hover span#Orig {
  display: none;
}
div#Can span#p3 {
    display: none;
}
div#Can:hover span#p3 {
    display: show;
    display: inline;
    background: linear-gradient(blue , yellow);
  -webkit-background-clip: text;
  background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    text-transform: uppercase; 
}
<div id="Can">
    <p style="font-family: verdana; font-size: 1.25rem; margin-left: 1.25em;"><span id="Orig">This Is Some Text</span><span id="p3"></span></p>
  </div>

const text5 = document.querySelector('#p3');
text5.textContent = "Hello World";
const Can = document.querySelector('#Canc');
Can.textContent = '!! No Meeting !!';
div#Can span#Orig {
  display: show;
}
div#Can:hover span#Orig {
  display: none;
}
div#Can span#p3 {
    display: none;
}
div#Can span#Canc {
    display: none;
}
div#Can:hover span#p3 {
    display: show;
    display: inline;
    background: linear-gradient(blue , yellow);
  -webkit-background-clip: text;
  background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    text-transform: uppercase; 
}
div#Can:hover span#Canc {
    display: show;
    display: inline;
    background: linear-gradient(blue , yellow);
  -webkit-background-clip: text;
  background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    text-transform: uppercase; 
}
<div id="Can">
    <p style="font-family: verdana; margin-left: 1.25em; font-size: 1.25rem; font-weight: 700;"><span id="Orig">This Is Some Text</span><span id="p3"></span></p>
  </div>
  <div id="Can">
    <p style="font-family: verdana; margin-left: 1.25em; font-size: 1.25rem; font-weight: 700;"><span id="Orig">This Is Some Text</span><span id="Canc"></span></p>
  </div>

When I tried this it appear to work but when I tried adding to them they stopped working and when I hovered over them they just dissappeared on my website, but appear correctly when I try them on here.

0

There are 0 best solutions below