how do I wait for value to change in html using Javascript

Question

Im making a chrome extension that buys automaticly, but sometimes the website is a little slow and it can take some time for the item to load that is has been put in the basket. The "put in basket" button looks like this:

<input type="submit" name="commit" value="add to basket" class="button">

And when it is done loading the button change to this:

<input type="submit" name="commit" value="remove" class="button remove">

How do i wait for the button to change and then go to check out page? Right now i have this code:

if ($(".button[name=commit]").val() == "remove"){
     window.open("checkout page");
   }

But the checkout page dosen't open because the value is "add to basket" at the time the page load. Hope this wasn't too confusing

If the answer helped remember to mark it as correct :) Good luck! — Gabriel Mesquita, Sep 19 '17 at 20:01

Gabriel Mesquita · Answer 1 · 2017-09-19T19:33:07.947

I will post a generic example so you can adapt to your problem:

<input type="submit" name="commit" value="add to basket" class="button">

$( document ).ready(function() {
   // Add a listener on your button
   document.getElementsByName("commit")[0].addEventListener('change', doSomething);
});

function doSomething(){
   alert('change');
}

When your input value changes from 'add to basket' the doSomething callback will be called.

how do I wait for value to change in html using Javascript

1 Answers1