Using javascript within HTML and only internal CSS

Question

I'm working on a page to put on my firewall that displays various output depending on category I'm blocking.

I've spent about the last day trying to understand why the simple javascript I'm attempting to use is not resulting in my case statements properly rendering the results I want to see.

I can't use any external CSS in this case, and forgive the crazy colors. I like to use them to tell where all my <div>s are positioned while hacking together things like this.

Is the issue that my <script> tags are in the wrong place? Should I be using document.write() somewhere instead of the .innerHTML() method?

Perhaps I'm not understanding the DOM correctly, but any pointers here in this context would be really appreciated.

//var cat = "<category/>";
var cat = "C1"
switch (cat) {
  case 'C1':
    var blockReason = "R1";
    break;
  case 'C2':
    var blockReason = "R2";
    break;
  case 'C3':
    var blockReason = "R3";
    break;
  case 'C4"
  var blockReason = "R4"
}

document.getElementById("blockReason").innerHTML = "<b>Block Reason: </b>"
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  border: 0;
}

.nav {
  width: 100%;
  background-color: #002856;
  color: white;
}

.nav h1 {
  text-align: center;
  margin-top: -.04em;
  font-family: Helvetica, Arial, sans-serif;
}

.content-wrapper {
  background-color: blue;
  height: 40em;
}

.content-pane1 {
  background-color: red;
  height: 15em;
}

.content-pane2 {
  background-color: orange;
  height: 20em;
}

.footer {
  background-color: #80CA9D;
  height: 3.6em;
}

<div class="nav">
  <h1> Website Access Has Been Blocked</h1>
</div>
<div class="content-wrapper"> Here is content-wrapper text
  <div class="content-pane1">
    <p>Access to the website address you were trying to visit has been blocked in accordance with policies.</p>
    <p>Please call the for help on <b>*somenumber</b>, or email someaddress@example.com, and provide the following information if you believe this is in error.</p>
    <p id="blockReason"><b>Block Reason: </b></p>
    <p><b>Category:</b>
      <category> </category>
    </p>
    <p><b>User\IP:</b>
      <user> </user>
    </p>
    <p><b>Webpage:</b>
      <url> </url>
    </p>
  </div>
  <div class="content-pane2">
    <p>
      You can also independently submit a re-categorization request at the following vendor website:
      <a href="https://www.someaddress.com/">https://www.someaddress.com/</a>
      <p>
        Blah blah explanation blah blah
      </p>
      <p>
        Additionally, you can blah blah more information here.
      </p>
  </div>
</div>
<div class="footer"> Footer text </footer>

Thanks @DanielMizerski , but I can't use outside resources like javascript frameworks. An explanation of what is technically incorrect here would be helpful. — trebleCode, Dec 08 '17 at 14:23
I don't see how this question is a duplicate of a jQuery question when the OP has been clear that they cannot use any framework or library. His getElementById is correct. His problem is writing the correct message to the HTML. — Edgar Hernandez, Dec 08 '17 at 14:28
@EdgarHernandez re-read the duplicate thread's title and contents. — Gabriele Petrioli, Dec 08 '17 at 14:30
@GabyakaG.Petrioli I read the question, the title of the duplicate and the contents of the duplicate and although I agree that that executing the javascript before the DOM is parsed is a problem, moving the script tag is not enough to answer the question. — Edgar Hernandez, Dec 08 '17 at 14:38
@GabyakaG.Petrioli If you noticed the solution I posted, and as Edgar mentioned the problem wasn't simple enough and based on the solution to which the duplication link has been marked. — , Dec 08 '17 at 14:43

score 2 · Accepted Answer · 2017-12-08T14:49:53.557

Is this what you're attempting to do? The changes:

You have various syntax errors in the javascript i.e opening and closing braces, semicolons not used for terminating expressions, etc.
For setting the second innerHTML, more like appending to the previous reason you need to use "+=" instead of "=". Hope, it helps.

var cat = "Adult";
switch (cat) {
  case "Adult":
    var blockReason = "Inappropriate adult content detected";
    break;
  case "Web-based Email":
    var blockReason = "Due to regulatory reasons we are unable to allow access to unaudited communication channels over web";
    break;
  case "Online Storage and Backup":
    var blockReason = "Websites providing online storage of files for free and as a service not permitted";
    break;
  case "Manually Blocked URLs":
  var blockReason = "URL has been manually blocked outside of predefined categories";
}

document.getElementById("blockReason").innerHTML = "<b>Block Reason: </b>"+blockReason;

var cat = 'Category1';
switch (cat) {
  case 'Category1':
    var blockRs = "Reason1";
    break;

  case 'Category2':
    var blockRs = "Reason2";
    break;

  case 'Category3':
    var blockRs = "Reason3";
    break;

  case 'Category4':
  var blockRs = "Reason4";
  break;
}

document.getElementById('blockReason').innerHTML += "<b>Block Reason: </b>" + blockRs;

html,
body {
  margin: 0;
  padding: 0;
}

body {
  border: 0;
}

.nav {
  width: 100%;
  background-color: #002856;
  color: white;
}

.nav h1 {
  text-align: center;
  margin-top: -.04em;
  font-family: Helvetica, Arial, sans-serif;
}

.content-wrapper {
  background-color: blue;
  height: 40em;
}

.content-pane1 {
  background-color: red;
  height: 15em;
}

.content-pane2 {
  background-color: orange;
  height: 20em;
}

.footer {
  background-color: #80CA9D;
  height: 3.6em;
}

<div class="nav">
  <h1> Website Access Has Been Blocked</h1>
</div>
<div class="content-wrapper"> Here is content-wrapper text
  <div class="content-pane1">
    <p>Access to the website address you were trying to visit has been blocked in accordance with policies.</p>
    <p>Please call the for help on <b>*somenumber</b>, or email someaddress@example.com, and provide the following information if you believe this is in error.</p>

    <p id="blockReason"><b>Block Reason: </b></p>
    <p><b>Category:</b>
      <category> </category>
    </p>
    <p><b>User\IP:</b>
      <user> </user>
    </p>
    <p><b>Webpage:</b>
      <url> </url>
    </p>
  </div>
  <div class="content-pane2">
    <p>
      You can also independently submit a re-categorization request at the following vendor website:
      <a href="https://www.someaddress.com/">https://www.someaddress.com/</a>
      <p>
        Blah blah explanation blah blah
      </p>
      <p>
        Additionally, you can blah blah more information here.
      </p>
  </div>
</div>
<div class="footer"> Footer text </div>

Entire code as requested:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>
            html,
        body {
        margin: 0;
        padding: 0;
        }
        body {
        border: 0;
        }
        .nav {
        width: 100%;
        background-color: #002856;
        color: white;
        }
        .nav h1 {
        text-align: center;
        margin-top: -.04em;
        font-family: Helvetica, Arial, sans-serif;
        }
        .content-wrapper {
        background-color: blue;
        height: 40em;
        }
        .content-pane1 {
        background-color: red;
        height: 15em;
        }
        .content-pane2 {
        background-color: orange;
        height: 20em;
        }
        .footer {
        background-color: #80CA9D;
        height: 3.6em;
        }
        </style>
    </head>
    <body>
        <div class="nav">
            <h1> Website Access Has Been Blocked</h1>
        </div>
        <div class="content-wrapper"> Here is content-wrapper text
            <div class="content-pane1">
                <p>Access to the website address you were trying to visit has been blocked in accordance with policies.</p>
                <p>Please call the for help on <b>*somenumber</b>, or email someaddress@example.com, and provide the following information if you believe this is in error.</p>
                <p id="blockReason"><b>Block Reason: </b></p>
                <p><b>Category:</b>
                    <category> </category>
                </p>
                <p><b>User\IP:</b>
                    <user> </user>
                </p>
                <p><b>Webpage:</b>
                    <url> </url>
                </p>
            </div>
            <div class="content-pane2">
                <p>
                    You can also independently submit a re-categorization request at the following vendor website:
                    <a href="https://www.someaddress.com/">https://www.someaddress.com/</a>
                    <p>
                        Blah blah explanation blah blah
                    </p>
                    <p>
                        Additionally, you can blah blah more information here.
                    </p>
                </div>
            </div>
            <div class="footer"> Footer text </div>
            <script >
                var cat = "Adult";
            switch (cat) {
            case "Adult":
            var blockReason = "Inappropriate adult content detected";
            break;
            case "Web-based Email":
            var blockReason = "Due to regulatory reasons we are unable to allow access to unaudited communication channels over web";
            break;
            case "Online Storage and Backup":
            var blockReason = "Websites providing online storage of files for free and as a service not permitted";
            break;
            case "Manually Blocked URLs":
            var blockReason = "URL has been manually blocked outside of predefined categories";
            }
            document.getElementById("blockReason").innerHTML = "<b>Block Reason: </b>"+blockReason;
            var cat = 'Category1';
            switch (cat) {
            case 'Category1':
            var blockRs = "Reason1";
            break;
            case 'Category2':
            var blockRs = "Reason2";
            break;
            case 'Category3':
            var blockRs = "Reason3";
            break;
            case 'Category4':
            var blockRs = "Reason4";
            break;
            }
            document.getElementById('blockReason').innerHTML += "<b>Block Reason: </b>" + blockRs;
            </script>
        </body>
    </html>

when I click Run code snippet, it renders the way I'm seeking, however when copying over the sections you posted it still isnt showing the block reason. For the sake of clarity in my understanding, can you post the page code in entirety? I think I have tags misplaced on my end — trebleCode, Dec 08 '17 at 14:41
Yeah, because I made changes and fixed your original code. Check the javascript code I posted. — , Dec 08 '17 at 14:41
Alright, hope it helped. Cheers And sure, I will post the entire code. — , Dec 08 '17 at 14:44
Highdef, what I was asking is if you could post a single post that render correctly like the three-peice suggestion above. I've tried importing what you posted but the JS still doesnt seem to work. I made an edit to the original posted code because I realized I had the switch statement twice — trebleCode, Dec 08 '17 at 14:48
I have edited my post but make sure that it uses the two switch statements from your original post, you can tweak it around and remove one of them as you see fit. — , Dec 08 '17 at 14:50
Awesome, thanks everyone here who helped and responded so quickly! — trebleCode, Dec 08 '17 at 14:51
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/160803/discussion-between-highdef-and-user2734259). — , Dec 08 '17 at 14:51

score -2 · Answer 2 · answered Dec 08 '17 at 14:28

  //var cat = "<category/>";
        var cat = "C1"
  switch(cat)
  {
   case 'C1':
   var blockReason = "R1";
   break;
   case 'C2':
   var blockReason = "R2";
   break;
   case 'C3':
   var blockReason = "R3";
   break;
   case 'C4':
   var blockReason = "R4"
  }

    document.getElementById("blockReason").innerHTML = "<b>Block Reason: </b>"
  }
</script>

Using javascript within HTML and only internal CSS

2 Answers2