CODEWITHSUNDEEP
javascripthtml
matzos
matzos

Reputation: 21

Execute a js function if html class == '600px'

I'm trying to execute a function in js through an html style property, but cannot get it to work.

I have a js function (jscode in example), which works with a shortcut. I want to circumvent this, by trying to get the code to execute itself when an html class on the webpage has 600px (the loading bar has 600px, when it finishes, the code should run with a delay of 1ms)

function test() {
    setTimeout(function () { jscode(); }, 1);
}

var htmltest = document.getElementsByClassName("loadingbar");
var htmlteststyle = htmltest[0].style;

if (htmlteststyle.width == '600px') {
    console.log("success");
    test();
}

It's not working at all, the console message does not appear and the js file executes itself only until this snippet comes up.

I'm just starting to play around with js and html and don't know where I went wrong, maybe it's a completely wrong approach?

any advice appreciated.

Upvotes: 2

Views: 94

Answers (4)

Shubham Dixit
Shubham Dixit

Reputation: 1

You could use Mutation Observer to automatically detect the width change.I am performing the width change here ,using the button click here.

function test() {
  setTimeout(function() {
    jscode();
  }, 1);
}

function jscode() {
  console.log("will run after 1 second")

}


var target = document.getElementsByClassName('loadingbar')[0];
// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    let width = mutation.target.style.width

    if (width == "600px") {
      console.log("hii")
      test();
      // execute your function here
    }

  });
});

// configuration of the observer:
var config = {
  attributes: true,
  childList: true,
  characterData: true
};

// pass in the target node, as well as the observer options
observer.observe(target, config);

// chnaging width to 600px;
function changewidth()

{
  document.getElementById("a").style.width = "600px";


}
.loadingbar {
  border: 1px solid black;
  width: 100px
}
<html>
<div class="loadingbar" id="a">HI</div>
<button onclick="changewidth()">Change width</button>

</html>

Upvotes: 0

frodo2975
frodo2975

Reputation: 11745

Yeah, your approach is completely backwards. It's really bad to try to listen for changes to the style, regardless of whether you use polling (which is what you're currently doing), or through a mutation observer. The reason is because it's more complicated than it needs to be, and it can hurt your DOM performance.

Instead, you want to tie into the code that's updating the progress bar. It should have a progress variable, so just run your code when it hits 100%.

Example code:

// Inside the code that updates the bar
if (progress === 100 && !hasCompleted){
    hasCompleted = true;
    console.log('success!');
}

Upvotes: 1

Aaron
Aaron

Reputation: 147

try using MutationObserver so you can listen to the style change event. See

https://stackoverflow.com/a/20683311/11537733

Upvotes: 0

Cosmin Staicu
Cosmin Staicu

Reputation: 1947

I've rewritten your function, from what I've understood from your question. The function checks the width of the element and if the width is 600px it will console.log success, then set a delay for the jsCode function. If the width is not 600px, the function will set a timeout to run itself after one second.

function checkWidth(){
  var htmltest = document.getElementsByClassName("loadingbar");
  var htmlteststyle = htmltest[0].style;
  if(htmlteststyle.width == '600px'){
    console.log("success");
    setTimeout(function(){ jscode(); }, 1);
  } else {
    setTimeout(checkWidth, 1000);
  }
}

Upvotes: 0

Related Questions