Question

嗨我无法弄清楚为什么我的按钮不能在下面工作是我的代码任何帮助表示赞赏。基本上一旦我点击按钮它应该打印故事与键入的单词或如果一个点是空白的故事没有显示和框缺少字符被红色边框包围感谢。

HTML code：

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="style.css" type="text/css">
 <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="script.js"></script>
  <title>assignment2</title>
</head>
<body>
<div id= "list">
<form id="form1" method="get">
<h3> Fill in the blanks and then press the submit button. </h3>
<label> Adjective
<input type="text" name="adjective"id ="adjective"/>
</label>
<br />
<br />
<label> Adjective
<input type="text" name="adjective2"id ="adjective2"/>
</label>
<br />
<br />
<label> Plural Noun
<input type="text" name="pluralnoun"id ="pluralnoun"/>
</label>
<br />
<br />
<label> Verb (ending in "ing")
<input type="text" name="verb"id ="verb"/>
</label>
<br />
<br />
<label> Edible object
<input type="text" name="edibleobject"id ="edibleobject"/>
</label>
<br />
<br />
<label> Monster
<input type="text" name="monster"id ="monster"/>
</label>
<br />
<br />
<label> Adjective
<input type="text" name="adjective3"id ="adjective3"/>
</label>
<br />
<br />
<label> Monster (again)
<input type="text" name="monster2"id ="monster2"/>
</label>
<br />
<br />
<label> Verb (ending in "ing")
<input type="text" name="verb2"id ="verb2"/>
</label>
<br />
<br />
<button type="submit" id="btn" name="btn"/>View Story</button>
</form>
</div>
<div id="story">
<p> Rain was still lashing the windows, which were now <span class ="adjective"> </span>, but inside all looked bright and cheerful. The firelight glowed over the countless <span class ="adjective2"></span><span class ="pluralnoun"></span> where people sat <span class ="verb"></span>, talking, doing homework or, in the case of Fred and George Weasley, trying to find out what would happen if you fed a <span class ="edibleobject"></span> to a <span class ="monster"></span>. Fred had "rescued" the <span class ="adjective3"></span>, fire-dwelling <span class ="monster2"></span> from a Care of Magical Creatures class and it was now <span class ="verb2"></span> gently on a table surrounded by a knot of curious people.
</p>
</div>
</body>
</html>

Javascript代码：

$(document).ready( function() {
    $('#story p').hide();
    $('#form1').on('submit', function(event) 
    {
        for(var i=0 ;i<$('#form1 input').length; i++) //tyler suggested this to make it easier fo my error borders.
        {
            $('#form1 input').eq(i).removeclass("errorborder");
        }
        if (!formFilled()){
            event.preventDefault();
        }
        else
        {
            $('span.adjective').html($('#form1 input#adjective').val());
            $('span.adjective2').html($('#form1 input#adjective2').val());
            $('span.pluralnoun').html($('#form1 input#pluralnoun').val());
            $('span.verb').html($('#form1 input#verb').val());
            $('span.edibleobject').html($('#form1 input#edibleobject').val());
            $('span.monster').html($('#form1 input#monster').val());
            $('span.adjective3').html($('#form1 input#adjective3').val());
            $('span.monster2').html($('#form1 input#monster2').val());
            $('span.verb2').html($('#form1 input#verb2').val());
            $('#story p').show();
    event.preventDefault(); //Tyler informed me this would stop the page from refreshing and deleting the inputted words.
}

});
    function formFilled(){
        var filled=true;

        for(var i=0;i<$('#form1 input').length; i++)
        {
            if ($('#form1 input').eq(i).val() === "")
            {
                $('#form1 input').eq(i).addClass("errorborder");
                filled=false;

            } 
        }
        return filled;
    }
});

CSS代码：

.errorborder{
    border:red, 3px,solid;

}
span {
    color: blue;
    text-decoration: bold;
    font-style: italic;
}

Answer 1

我在上面的评论中使用了一些建议，并自行更改了一些内容并清理了代码。我已经成功了......

主要变化是

将表单method更改为post
将您的<button>更改为<input type="submit">

请参阅this jsFiddle以查看代码的实际示例。

希望您能够通过与自己的代码进行比较来查看错误！

为什么我的按钮不能运行我的javascript

1 个答案: