【发布时间】：2015-01-09 19:21:24
【问题描述】：
您好，我无法弄清楚为什么我的按钮在下面不起作用是我的代码，感谢您的帮助。基本上，一旦我按下按钮，它应该打印输入文字的故事，或者如果一个地方留空，故事不显示并且缺少字符的框被红色边框包围 谢谢。
HTML 代码：
<!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;
}
【问题讨论】：
-
如果你为你的代码创建了一个jsFiddle——你会更幸运地获得帮助。
-
您的 script.js 代码在哪里？此外，您的 html 代码中似乎也没有按钮... 编辑：他将其余的 +1 添加到 David，jsFiddle 会更好
-
这是你代码的实际布局吗？在 body 标签之外你真的有 CSS 和 JS 代码吗？这可能会让试图帮助您的人感到困惑？
-
@david 我的意思是 @ 是给 David Tansey 的，让他知道现在 SO 内置了类似于 jsFiddle 的功能。我同意社区不是调试器。大卫太多了:)
-
@LoganMurphy 解决了这个小错误，谢谢，我已经问过泰勒，但他也不确定为什么我的按钮不起作用。
标签： javascript jquery html css forms