0

I have template folder where in I have a progress Stepper when I click on it, I want the step to be updated or some colour to be added in that.

<div>
    <ul id="progress-bar" class="progressbar">
      <template if:true={isClickable}>
        <template for:each={navobj} for:item="step" for:index="index">
          <li key={step.indivId}>
            <a
              key={step.indivId}
              data-target-id="progress-bar"
              data-appindvid={step.indivId}
              onclick={linkOnSelect}
              data-id={step.id}
              data-appid={step.appId}
              >{step.name}</a
            >
          </li>
        </template>
      </template>
</ul>
</div>

linkOnSelect(event)
    { 
        var  currStep=event.target.dataset.id;
        this.updateProgressStepperStateLink(currStep);    
    }
updateProgressStepperStateLink(dataidvar) {        
        console.log('data-id='+dataidvar);
        var Celm = test; 
        var tr=document.getElementById(dataidvar).style.color = "green"; 
        console.log('h@='+tr);  
       // var classItem = document.getElementsByClassName(".active");
        }

But the issue is, it is not getting set.

.progressbar li {
    float: left;
    position: relative;
    z-index: 9;
    font-size: var(--peak-x-large);
    line-height: 24px;
    letter-spacing: normal;
    font-family: SourceSansPro-Regular;
    color: var(--river-bed);
    text-align: center;
}

.progressbar li.current {
    font-family: SourceSansPro-SemiBold;
    color: var(--shark);
    font-weight: normal;
}

.progressbar li:before {
    width: 20px;
    height: 20px;
    content: '';
    border: 2px solid #B0BAC5;
    background-color: #B0BAC5;
    display: block;
    text-align: center;
    margin: 0 auto 10px;
    border-radius: 50%;
    z-index: 9999;
}

.progressbar li:after {
    width: 75%;
    height: 4px;
    content: '';
    position: absolute;
    background-color: #B0BAC5;
    top: 7px;
    left: -37.5%;
    z-index: -1;
}

.progressbar li:first-child:after {
    content: none;
}

.progressbar li.active:before {
    border-color: #00778F;
    background-color: #00778F;
    content: "\2713";
    color: white;
    font-size: 12px;
    line-height: 18px;
}

.progressbar li.current:before {
    border-color: #00778F;
    border-width: 4px;
    background-color: white;
}

.progressbar li.active:after, .progressbar li.current:after {
    background-color: #00778F;
}

1 Answer 1

0

you might want to refer to the documentation: Access Elements the Component Owns

Don’t use the window or document global properties to query for DOM elements. See DOM Access Containment. Also, we don’t recommend using JavaScript to manipulate the DOM. It's better to use the Lightning Web Components HTML directives to write declarative code.

in a nutshell, you want to avoid using:

  • document.getElementById
  • document.getElementsByClassName

...etc, etc

1
  • Thanks glls But I tried this : const steps = this.template.querySelectorAll('[data-id]'); let step; let currentStepFlag = false; for (step of steps) { if (step.dataset.id === this.currentStepId) { //currentStepFlag = true; step.classList.add('current'); } }step.classList.add('current'); And additionally I updated the li tag with data-id-><li key={step.indivId} data-id{step.id}>
    – user91530
    Aug 29, 2021 at 16:28

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .