JSFiddle - React, Tailwind, and code Playground

by Michel Plungjan

HTML

<div id="testblock">Testblock: </div>
    <header>
        <hr>
            <p>- Header Background Color Controller -</p>
            <table>
                <tr>
                    <td>Javascript Controller:</td>
                    <td class="JS">Red
                        <input type="hidden" value='false'>
                    </td>
                    <td class="JS">Green
                        <input type="hidden" value='false'>
                    </td>
                    <td class="JS">Blue
                        <input type="hidden" value='false'>
                    </td>
                </tr>
                <tr>
                    <td>jQuery Controller:</td>
                    <td class="jQ" value=false>Red</td>
                    <td class="jQ" value=false>Green</td>
                    <td class="jQ" value=false>Blue</td>
                <tr>
            </table>
        <hr>
    </header>
    <div class="main_div">

</div>

JavaScript

window.onload=function() {
  var JS_elements = document.getElementsByClassName("JS")

  for (y = 0; y < JS_elements.length; y++){
    JS_elements[y].addEventListener('click', function() {
        switch_JS(this)
    });
  }
}
function testfunc() {
    alert("TestFunc");
}

function true_switch(val) {
    document.getElementById("testblock").innerHTML += "true_switch worked; "; <!-- debug line -->
    if (val == true) {
        return false;
    } else if (val == false) {
        return true;
    } else {
        alert("Error #475989 in function true_switch");
    }
}

function switch_JS(domobj) {
    <!-- takes as input an HTML object, and switched the value from true to false, or from false to true -->
    document.getElementById("testblock").innerHTML = document.getElementById("testblock").innerHTML + "Step 1 worked; "; <!-- debug line -->
    console.log(domobj); <!-- debug line -->
    val = domobj.querySelector("input").value;
    document.getElementById("testblock").innerHTML += "Step 2 worked; "; <!-- debug line -->
    if ((typeof val) != Boolean) {
        alert("Error, non-boolean passed into switch_JS");
        document.getElementById("testblock").innerHTML += "1st if worked; ";
    } else {
        domobj.querySelector("input").value = true_switch(HTML.value);
        document.getElementById("testblock").innerHTML += "else worked; "; <!-- debug line -->
    }
}