<!DOCTYPE html>
<html>
<head>
<title>Main Menu</title>
<link rel="stylesheet" href="menu_stylesheet.css">
</head>
<body>
<div class="center">
Welcome to Trashland
</div>
<div class="center">
<form action="byond://">
<input type="hidden" name="selection" value="toggle_ready" readonly>
<input id="ready_toggle" onclick="on_ready_click()" type="submit" value="Ready" class="button">
</form>
<form action="byond://">
<input type="hidden" name="selection" value="observe" readonly>
<input type="submit" value="Observe" class="button">
</form>
<form action="byond://">
<input type="hidden" name="selection" value="setup" readonly>
<input type="submit" value="Setup Character" class="button">
</form>
</div>
</body>
<script type="text/javascript">
var r_state = false;
function on_ready_click() {
r_state = !r_state;
var button = document.querySelector("#ready_toggle");
button.value = (r_state ? "unready" : "ready");
}
</script>
</html>
Problem:
Whenever I attempt to execute the included js function I receive the following error:
Line: 31
Char: 3
Error: Object doesn't support property or method 'querySelector'
Code: 0
URL: //url of the html doc
This code runs correctly in FF or Chrome but fails in the browser control. Both the queryselector and getelementbyid methods produce the same error.
https://stackoverflow.com/questions/25632927/ object-doesnt-support-property-or-method-queryselector-shows -when-accessing
On a gut feeling that the root of the problem in Byond was a compatibility issue I tried the same solution and I was successful.
For the moment I would call this question closed, but if someone wants to provide a more technical explanation of exactly what is happening with the browser, then I'll leave it.