试图建立一个HTML toutuorial，并且无法让我的javascript检查我的文本框的值以被javascript检查

Question

Hi Im trying to get my code to work for checking if the html is right in the textarea. 您好，我试图让我的代码正常工作，以检查html是否在textarea中正确。 If it is right it will open another page with what was in the textarea already as a website (this part works I checked before creating the if else). 如果设置正确，它将打开另一个页面，其中包含文本区域中已经作为网站的内容（在创建if else之前，我已经检查了此部分的内容）。 I only want that to happen if the code in the textarea is the same as what I put in my value in javascript (this dosent work). 我只希望在textarea中的代码与我在javascript中输入的值相同的情况下发生这种情况（此工作很重要）。 Heres my whole html for that page. 这是我整个页面的HTML。

<!DOCTYPE html>
<html>
    <head>

        <title>Lesson 1</title>
                        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <script type="text/javascript">
        function ShowResult()
        {
            var check = x ;
            var html = "<h1>This is Heading 1</h1><h2>This is Heading 2</h2><h3>This is Heading 3</h3><h4>This is Heading 4</h4><h5>This is Heading 5</h5><h6>This is Heading 6</h6><p>This is Paragraph Text</p><blockquote><p>This is in a qoute</p><small>Person <cite>Source Title</cite></small></blockquote>" ;
            if (check === html) {
                my_window = window.open("about:blank", "mywindow1");
                my_window.document.write('<!DOCTYPE html><html><head><title>Lesson 1 Result</title><link href="css/bootstrap.min.css" rel="stylesheet"></head><body>' + '<div class="alert alert-dismissible alert-info"><button type="button" class="close" data-dismiss="alert">×</button><strong>Tip</strong> This is your code editor output. It will sow up when you are right in your lesson. To go back and continue close this tab ( click the x on the top bar of your web browser )</p></div><p>' + x + '</body></html>');
            }
        }       
    </script>
    <body>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">Learn Lesson 1 HTML Syntax</div>
                <div class="panel-body">

            </div>
        </div>
        <!-- Ad starts here-->
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- LRN Ad -->
<ins class="adsbygoogle"
     style="display:inline-block;width:320px;height:100px"
     data-ad-client="ca-pub-9273905782779277"
     data-ad-slot="9421350343"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
        <!-- ends here -->
    </div>
    <div class="container">
        <textarea style="font-size:15px; resize: none; height: 600px; width: 100%; font-family: Consolas,monaco,monospace; background-color: #6F6F6F; color: #F9F9F9;" onblur="x=this.value">
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
<p>This is Paragraph Text</p>
<blockquote>
  <p>This is in a qoute</p>
  <small>Person <cite>Source Title</cite></small>
</blockquote>

        </textarea>
        <div class="col-md-12">
            <br />
            <a onclick="ShowResult()" class="btn btn-default btn-lg btn-block">Try it out</a>
            <!-- Ad starts here-->
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- LRN Ad -->
<ins class="adsbygoogle"
     style="display:inline-block;width:320px;height:100px"
     data-ad-client="ca-pub-9273905782779277"
     data-ad-slot="9421350343"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
        <!-- ends here -->

            <hr>
            <br/>
            <p>Copyleft ;-) Maksim Tonyushkin 2015</p>
        </div>

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

The part that doesn't work is: 无效的部分是：

<script type="text/javascript">
        function ShowResult()
        {
            var check = x ;
            var html = "<h1>This is Heading 1</h1><h2>This is Heading 2</h2><h3>This is Heading 3</h3><h4>This is Heading 4</h4><h5>This is Heading 5</h5><h6>This is Heading 6</h6><p>This is Paragraph Text</p><blockquote><p>This is in a qoute</p><small>Person <cite>Source Title</cite></small></blockquote>" ;
            if (check === html) {
                my_window = window.open("about:blank", "mywindow1");
                my_window.document.write('<!DOCTYPE html><html><head><title>Lesson 1 Result</title><link href="css/bootstrap.min.css" rel="stylesheet"></head><body>' + '<div class="alert alert-dismissible alert-info"><button type="button" class="close" data-dismiss="alert">×</button><strong>Tip</strong> This is your code editor output. It will sow up when you are right in your lesson. To go back and continue close this tab ( click the x on the top bar of your web browser )</p></div><p>' + x + '</body></html>');
            }
        }
    </script>

The value x is given on the textarea onblur="x=this.value". x值在textarea onblur =“ x = this.value”上给出。 Any help? 有什么帮助吗？

Answer 1

Textareas have no value attribute. Textareas没有值属性。 You need to use innerHTML 您需要使用innerHTML

Answer 2

I solved my problem by like dis (the reason it wasn't working was because of the spacing): 我像dis一样解决了我的问题（之所以不起作用是因为间隔）：

<!DOCTYPE html>
<html>
    <head>

        <title>Lesson 0</title>
        <link rel="icon" type="image/png" href="favicon.ico">
                        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <script type="text/javascript">
        function ShowResult()
        {
            var x = document.getElementById("html").value
            var z = document.getElementById("answer").value
            if (x === z) {
                my_window = window.open("about:blank", "mywindow1");
                my_window.document.write('<!DOCTYPE html><html><head><title>Lesson 0 Result</title><link href="css/bootstrap.min.css" rel="stylesheet"></head><body>' + '<div class="alert alert-dismissible alert-info"><button type="button" class="close" data-dismiss="alert">×</button><strong>Tip</strong> This is your code editor output. It will show up when you are right. To go back and continue close this tab ( click the x on the top bar of your web browser )</p></div><p>' + x + '</body></html>');
            }
        }   
    </script>
    <body>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">Learn Lesson 0 Geting started</div>
                <div class="panel-body">
                    The first lesson will be a tutorial on how to use this website.  This part of the webpage is the part that teaches about code and gives you examples. Below is what you will need to do to complete this lesson.  The gray box is your code editor. Inside it you will write your code for the lesson. Good luck on your first lesson (click answers if you need help).
            </div>
        </div>
        <ul class="nav nav-tabs">
            <li class="active"><a href="#home" data-toggle="tab" aria-expanded="false">Steps</a></li>
            <li class=""><a href="#profile" data-toggle="tab" aria-expanded="false">Answer</a></li>
        </ul>
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="home">

                <div class="list-group">
            <a href="#" class="list-group-item">
                <h4 class="list-group-item-heading">1.</h4>
                <p class="list-group-item-text">Click on the code editor and between the <code>&lt;h1&gt;</code> and <code>&lt;/h1&gt;</code> tags write <kbd>Advertisement</kbd></p>
            </a>
            <a href="#" class="list-group-item">
                <h4 class="list-group-item-heading">2.</h4>
                <p class="list-group-item-text">Click Submit on the bottom of the page</p>
            </a>
            </div>

            </div>
            <div class="tab-pane fade" id="profile">
                <textarea id="answer" style="font-size:15px; resize: none; height: 400px; width: 100%; font-family: Consolas,monaco,monospace; background-color: #F9F9F9; color: #6F6F6F;">
<h1>Advertisement</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
<p>This is Paragraph Text</p>
<blockquote>
  <p>This is in a qoute</p>
  <small>Person <cite>Source Title</cite></small>
</blockquote></textarea>
            </div>
        </div>
        <!-- Ad starts here-->
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- LRN Ad -->
<ins class="adsbygoogle"
     style="display:inline-block;width:320px;height:100px"
     data-ad-client="ca-pub-9273905782779277"
     data-ad-slot="9421350343"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
        <!-- ends here -->
    </div>
    <div class="container">
        <textarea id="html" style="font-size:15px; resize: none; height: 600px; width: 100%; font-family: Consolas,monaco,monospace; background-color: #6F6F6F; color: #F9F9F9;">
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
<p>This is Paragraph Text</p>
<blockquote>
  <p>This is in a qoute</p>
  <small>Person <cite>Source Title</cite></small>
</blockquote></textarea>
        <div class="col-md-12">
            <br />
            <a onclick="ShowResult()" class="btn btn-default btn-lg btn-block">Submit</a>
            <!-- Ad starts here-->
        <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- LRN Ad -->
<ins class="adsbygoogle"
     style="display:inline-block;width:320px;height:100px"
     data-ad-client="ca-pub-9273905782779277"
     data-ad-slot="9421350343"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
        <!-- ends here -->

            <hr>
            <br/>
            <p>Copyleft ;-) Maksim Tonyushkin 2015</p>
        </div>

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

试图建立一个HTML toutuorial，并且无法让我的javascript检查我的文本框的值以被javascript检查

问题描述

2 个解决方案

解决方案1
0 2015-08-11 13:34:26

解决方案2
0 已采纳 2015-08-11 20:27:38

试图建立一个HTML toutuorial，并且无法让我的javascript检查我的文本框的值以被javascript检查

问题描述

2 个解决方案

解决方案1 0 2015-08-11 13:34:26

解决方案2 0 已采纳 2015-08-11 20:27:38

解决方案1
0 2015-08-11 13:34:26

解决方案2
0 已采纳 2015-08-11 20:27:38