Question 267934 in Html Question posted in
Some basic documentation can be found here.

Html – How do I let only the block code move and other span tag remain unaffected?

I want to change the text as per the code. Here other span tags are also getting affected by changing of this text. How do I make the other span tags be unaffected?

var para_values = [
  {
    content: "BRAND "
  },
  {
    content: "MISSION"
  }
];

function showVal(index) {
  var val = document.getElementsByClassName("header-para")[0];
  console.log(val);
  val.innerHTML = para_values[index].content;
}

showVal(0); // called for visibility on the screen

// function for changing the content
function textChange() {
  var index = 0;
  var intrvl = setInterval(() => {
    index = index + 1;
    if (index == para_values.length) {
      index = 0;
    }
    showVal(index)
  }, 4000)
}

textChange();
.header-para {
  height: 60px;
  background-color: rgb(51, 235, 198);
}

.text-overlay span {
  color: black;
  font-size: 56px;
}
<div class="text-overlay">
  <span>Your</span> <span class="header-para"></span><span>Understand</span>
</div>
Tags:

2

Answers


  1. 0

    To target the various <span> elements use CSS selectors with document.querySelector('#my-span').

    let span = document.querySelector('span');

setTimeout(() => {
  span.textContent = 'bar';
}, 2000 );
    <p>This is <span>foo</span>.
    Login or Signup to reply.
  2. 0

    For my answer:
    I gave each span a display inline block so I can control it as spans are typically inline and you are limited to what you can do with it.

    I gave the target span a set with and text-align:center so the text will be aligned within that span.

    Then I created a CSS class for reveal that has an animation on it that slides down.

    Then I add that class in your showval function. I also used an animation end event listener to remove the class from the span after each animation is completed. So that way it will be restarted everytime I add the class to the span.

    Also I switched to using querySelector instead of getElementsByClassName.

    var para_values = [
  {
    content: "BRAND "
  },
  {
    content: "MISSION"
  }
];

const wordEle = document.querySelector(".header-para");

function showVal(index) {
  wordEle.innerHTML = para_values[index].content;
  wordEle.classList.add("reveal")
}

showVal(0);

function textChange() {
  
  var index = 0;
  setInterval(() => {
    
    index = index + 1;
    if (index == para_values.length) {
      index = 0;
    }
   
    showVal(index)
  }, 4000)
}

textChange();

wordEle.addEventListener("animationend", (event) => { wordEle.classList.remove("reveal")});
    .header-para {
  height: 60px;
  background-color: rgb(51, 235, 198);
  width:250px;
  text-align:center;
}

.text-overlay span {
  color: black;
  font-size: 56px;
  display:inline-block;
}

.reveal {
    animation: slide-down 1s;
}

@keyframes slide-down {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0px);
    animation: linear;
  }
}
    <div class="text-overlay">
  <span>Your</span> <span class="header-para"></span><span>Understand</span>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search