堆棧內存溢出
  簡體   English   中英

試圖建立一個HTML toutuorial，並且無法讓我的javascript檢查我的文本框的值以被javascript檢查

[英]Trying to build an html toutuorial and can't get my javascript to check the value for my textbox to get checked by javascript

 原文  2015-08-11 13:01:29  3   2    javascript/ html/ dom/ if-statement

問題描述

您好，我試圖讓我的代碼正常工作，以檢查html是否在textarea中正確。 如果設置正確，它將打開另一個頁面，其中包含文本區域中已經作為網站的內容（在創建if else之前，我已經檢查了此部分的內容）。 我只希望在textarea中的代碼與我在javascript中輸入的值相同的情況下發生這種情況（此工作很重要）。 這是我整個頁面的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>

無效的部分是： 

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

x值在textarea onblur =“ x = this.value”上給出。 有什么幫助嗎？

2 個解決方案

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

Textareas沒有值屬性。 您需要使用innerHTML

解決方案2
 0 已采納  2015-08-11 20:27:38

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 我無法獲取JavaScript來切換我的登錄下拉列表。 為什么javascript無法連接到我的html？ 無法使用javascript（初學者）-請檢查我的代碼 無法獲取JavaScript方法來驗證我的HTML表單 無法使用javascript在我的HTML表單中顯示數據 Javascript 無法獲取我的值並在 html 中計算 Javascript / HTML復選框獲得檢查值 為什么我無法在JavaScript代碼中獲得輸入值 Javascript Promise：無法從我的函數中獲取返回值 無法加載我的JavaScript 無法通過JavaScript驗證我的“代碼”
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM