Question

我正在使用一个页面来放置我的防火墙，该防火墙根据类别I阻止显示各种输出。

我在最后一天试图理解为什么我尝试使用的简单javascript不会导致我的case语句正确呈现我想要查看的结果。

在这种情况下我不能使用任何外部CSS，并原谅疯狂的颜色。我喜欢用它们来判断我的所有<div>的位置，同时将这些事情混在一起。

我的<script>标签是否出现问题？我应该在某处使用document.write()而不是.innerHTML()方法吗？

也许我没有正确理解DOM，但是在这个上下文中的任何指针都真的赞赏。

＆＃13;

//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>"
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

这是你想要做的吗？变化：

您在javascript中有各种语法错误，即打开和关闭大括号，不用于终止表达式的分号等。
为了设置第二个innerHTML，更像是附加到上一个原因，你需要使用“+ =”而不是“=”。希望，这有帮助。

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>

请求的完整代码：

<!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>

Answer 2

  //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>

在HTML中使用javascript，只使用内部CSS

2 个答案: