iiviigames/_fixingSoundAlerts.md

## _fixingSoundAlerts.md

      
    Raw
  

              _fixingSoundAlerts.md
            
          
    Information

While using the SoundAlerts Scene Editor, I needed to add a certain "Live element" to the scene. Their coding is horrid though. Look below.


  ^{See the buttons on the second row? The Leaderboard options?}

  ^{Their Add buttons can't be pressed due to the fact they are hidden.}
  
So, how do we get access?

Easy enough!
How to Get at It


Open the browser's JS console.

This should be Ctrl + Shift + I in most browsers.
If not, try K or C, and if it doesn't bring up the console tab, just select it.


Your browser's console has something called JQuery built into it whether you realize it or not, and if you're not familiar, it is a library that makes getting and setting of HTML elements from Javascript much simpler.
Rather than typing document.getElementById("yourelement"), you can simply do this: $$("#yourelement") and get the same results.

We're going to use this to get all the buttons on the page.


buttons = $$("button")
// I'll explain this next line momentarily.
target = buttons[18];


So, when we save the buttons variable, then console will have printed out an array of any buttons it found on the page. By hovering over the console printout, it will highlight the buttons corresponding to the one you hover over. The one I wanted happened to be element 18 in the list - and so that is our target button.
Now, all we need to do is click it. And that's easy.


target.click();


The element should now be added into the scene you wanted to make!


Further Info and Resources

Here are some resources I used to test out the code for this before posting.
There is also a file below, example.html which is an alteration of the W3 Playground code you'll find in the first link. Run the example as is when you find it and you'll see a button that shuts off the first h1 element in an iframe. What my changes do is add a second button, add id tags to the original and new button, and create a new function called activateOther that will fire when pressing the newly made second button.

If you look at the code, you'll notice I had to use document.getElementById there, because the playground doesn't have JQuery built into it - but it functions the same way as I explained above.

The most important thing happens from lines 20 - 26, where by clicking the new button, not the old one, we will get some logs to the console as well as the same behavior seen from the original button. The important function to notice is line 26.

In the HTML, you'll see each button has an onclick attribute which is the action that takes place when a click event occurs on the button.
Those same buttons aren't just listening for click events though - they can be forced by calling the built-in click function - which fires when a user presses the button - the same one we assigned to it with onclick.
Wouldn't you know it? You can just call the function bound to it from the javascript code.


W3 Playground
More W3
Superuser Post


## example.html
<!DOCTYPE html>
<html>
<body>

<iframe id="myFrame" src="/default.asp" style="height:380px;width:100%"></iframe>

<p>Click the "Tryit" button to hide the first H1 element in the iframe (another document).</p>

<button id="receiver" onclick="myFunction()">Try it</button>
<button id="forcer" onclick="activateOther()">Press the other button</button>
<script>
log = console.log;

function myFunction() {
  var iframe = document.getElementById("myFrame");
  var elmnt = iframe.contentWindow.document.getElementsByTagName("H1")[0];
  elmnt.style.display = "none";
}

function activateOther() {
  var force = document.getElementById("forcer");
  var receive = document.getElementById("receiver");

  log(force);
  log(receive);
  receive.click(); // The Magic Line.
}
</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<body>

	<iframe id="myFrame" src="/default.asp" style="height:380px;width:100%"></iframe>

	<p>Click the "Tryit" button to hide the first H1 element in the iframe (another document).</p>

	<button id="receiver" onclick="myFunction()">Try it</button>
	<button id="forcer" onclick="activateOther()">Press the other button</button>
	<script>
	log = console.log;

	function myFunction() {
	var iframe = document.getElementById("myFrame");
	var elmnt = iframe.contentWindow.document.getElementsByTagName("H1")[0];
	elmnt.style.display = "none";
	}

	function activateOther() {
	var force = document.getElementById("forcer");
	var receive = document.getElementById("receiver");

	log(force);
	log(receive);
	receive.click(); // The Magic Line.
	}
	</script>

	</body>
	</html>