I am trying to make an empty circle appear when the contents of a GET request are a 0, and a full circle appear when the contents are 1. I am not really sure how to implement this. Needs to poll every 5 seconds or so.
<style>
.emptycircle {
border-radius: 50%;
height: 20px;
width: 20px;
border: 2px solid red;
}
.fullcircle {
border-radius: 50%;
height: 20px;
width: 20px;
border: 2px solid red;
background-color: #f00;
}
...
<p id="state" class="emptycircle"></p>
...
<script>
function getState() {
$.ajax({
url: '/state',
type: 'GET',
success: function(data) {
console.log(data);
}
});
if (getState == 0) {
var state = '.emptycircle';
} else {
state = '.fullcircle';
}
}
</script>
Currently, invoking getState() from the console returns ‘undefined 0’ or ‘undefined 1’ (with undefined and the number being each on their own line), which is sort of the correct behaviour, so I just need to connect that to the element with id “state” and then have the script run every few seconds.