CODEWITHSUNDEEP
javascripthtml
Jose Manuel Zuñiga Moreno
Jose Manuel Zuñiga Moreno

Reputation: 25

Clicking Radio type buttons?

Well this java script should click the buttons (making an animation slideshow) the thing is i cant manage the code to click the button, and i cant find the error, seems to be running

<!DOCTYPE html>
<html>
<script type="text/javascript">
    var seconds = 0;
    setInterval(setTime, 1000);

    function setTime() {
        seconds++;
        if (seconds == 5) {
            document.getElementById('i2').value = true;
        } else if (seconds == 10) {
            document.getElementById('i3').value = true;
        } else if (seconds == 15) {
            document.getElementById('i4').value = true;
        } else if(seconds == 20) {
            document.getElementById('i1').value = true;
            seconds == 0;
        }
    }

</script>
<div class="slideshow" onload="setTime()">
  <input type="radio" id="i1" name="images" checked/>
  <input type="radio" id="i2" name="images" />
  <input type="radio" id="i3" name="images" />
  <input type="radio" id="i4" name="images" />
</div>
</html>

I tried .checked .click() .value, its not working, something is messing up the action but again I cant figure out what it is.

Upvotes: 1

Views: 69

Answers (3)

Jose Manuel Zu&#241;iga Moreno
Jose Manuel Zu&#241;iga Moreno

Reputation: 25

it had 2 typos cheked and == its working now

var seconds = 0;
setInterval(setTime, 1000);

function setTime() {
    seconds++;
    if (seconds == 5) {
        document.getElementById('i2').checked = true;
    } else if (seconds == 10) {
        document.getElementById('i3').checked = true;
    } else if (seconds == 15) {
        document.getElementById('i4').checked = true;
    } else if (seconds == 20) {
        document.getElementById('i1').checked = true;
        seconds = 0;
    }
}
<div class="slideshow" onload="setTime()">
  <input type="radio" id="i1" name="images" checked/>
  <input type="radio" id="i2" name="images" />
  <input type="radio" id="i3" name="images" />
  <input type="radio" id="i4" name="images" />
<div>

I had == 0; and cheked as an input. Thanks for your suggestions

Upvotes: -1

Mamun
Mamun

Reputation: 68933

It is the checked property you have to set not the value.

Please Note: Your script is executing before the DOM is fully loaded. Either you have to place the script at the end of the page or wrap the code with

DOMContentLoaded

The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. A very different event load should be used only to detect a fully-loaded page. It is an incredibly common mistake to use load where DOMContentLoaded would be much more appropriate, so be cautious.

You also have typo in seconds == 0;, should be the assignment operator (=) instead of comparison.

<!DOCTYPE html>
<html>
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function(event) {
    var seconds = 0;
    setInterval(setTime, 1000);

    function setTime() {
        seconds++;
        if (seconds == 5) {
            document.getElementById('i2').checked = true;
        } else if (seconds == 10) {
            document.getElementById('i3').checked = true;
        } else if (seconds == 15) {
            document.getElementById('i4').checked = true;
        } else if(seconds == 20) {
            document.getElementById('i1').checked = true;
            seconds = 0;
        }
    }
  });
    

</script>
<div class="slideshow" onload='setTime()'>
  <input type="radio" id="i1" name="images" checked/>
  <input type="radio" id="i2" name="images" />
  <input type="radio" id="i3" name="images" />
  <input type="radio" id="i4" name="images" />
</div>
</html>

Upvotes: 1

Quentin
Quentin

Reputation: 943142

The value is the value that will be submitted with the form data if the radio button is checked.

You need to modify the checked property if you want to change its state from unchecked to checked.

var seconds = 0;
setInterval(setTime, 1000);

function setTime() {
  seconds++;
  if (seconds == 5) {
    document.getElementById('i2').checked = true;
  } else if (seconds == 10) {
    document.getElementById('i3').checked = true;
  } else if (seconds == 15) {
    document.getElementById('i4').checked = true;
  } else if (seconds == 20) {
    document.getElementById('i1').checked = true;
    seconds == 0;
  }
}
<input type="radio" id="i1" name="images" checked/>
<input type="radio" id="i2" name="images" />
<input type="radio" id="i3" name="images" />
<input type="radio" id="i4" name="images" />

Upvotes: 1

Related Questions