Question

我是程序员学生，我的Java脚本代码有问题：（

我应该制作一个madlib游戏，除了我无法弄明白如何将故事的输出和用户输入的单词显示在同一窗口上之外，我已经掌握了所有内容。

我被告知要使用数组和循环，但它对我来说似乎过于庞大且不必要地复杂（可能我错了）。

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Madlib Game!</title>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<p>Fill in the blanks and then press "View story"</p>
<form>
<table border="0" cellpadding="5"><tr><td>

Adjective:
<input type="text" name="input1" size="15"><tr><td>


Adjective:
<input type="text" name="input2" size="15"><tr><td>


Plural Noun:
<input type="text" name="input3" size="15"><tr><td>


Verb (ending in 'ing'):
<input type="text" name="input4" size="15"><tr><td>


Edible Object:
<input type="text" name="input5" size="15"><tr><td>


Monster:
<input type="text" name="input6" size="15"><tr><td>


Adjective:
<input type="text" name="input7" size="15"><tr><td>


Monster (again):
<input type="text" name="input8" size="15"><tr><td>


Verb (ending in 'ing'):
<input type="text" name="input9" size="15">
</table>

<input type="button" value="View Story" onclick="makeStory()">
</form>
</body>
</html>

这是我的JavaScript代码......

function makeStory()
{ 
  text = ("Rain was still lashing the windows, which were now " +input1.value+"but inside all looked bright and cheerful. ");
  text += ("The firelight glowed over the countless " + input2.value + input3.value + "where people sat, talking, doing homework or, ");
  text += ("in the case of Fred and George Weasley, trying to find out what would  happen if you fed a " +input4.value+ "to a " +input5.value);
  text += (". Fred had 'rescued' the "+input6.value+", fire-dwelling "+input7.value+"from a Care of Magical Creatures class and it was now ");
  text += (+input8+ " gently on a table surrounded by a knot of curious people.");
        document.write(text);
}

天哪，我希望我把这些代码块做好了......

Answer 1

这是一个如何使用数组和循环的快速示例。您的html中存在很多问题 - 您错过了<tbody>，并且没有关闭任何表格行<tr>和单元格<td>。不要在你的html中使用内联javascript（onclick）。在javascript中写下它所属的地方 - 请参阅下面的示例。 Live demo here (click).

var pieces = [
  "Rain was still lashing the windows, which were now ",
  " ,but inside all looked bright and cheerful. ",
  "The firelight glowed over the countless ",
  "where people sat, talking, doing homework or, ",
  "in the case of Fred and George Weasley, trying to find out what would  happen if you fed a ",
  "to a ",
  ". Fred had 'rescued' the ",
  ", fire-dwelling ",
  "from a Care of Magical Creatures class and it was now ",
  " gently on a table surrounded by a knot of curious people."
];

function makeStory() {
  var result = '';
  var inputs = document.querySelectorAll('input');

  for (var i=0; i<inputs.length; ++i) {
    result+= pieces[i]+inputs[i].value;
  }
  result+= pieces[inputs.length];

  var storyElem = document.getElementById('story');
  storyElem.textContent = result;

  var inputSection = document.getElementById('input-section');
  inputSection.style.display = 'none';
}

var button = document.getElementById('make-story');
button.addEventListener('click', makeStory);

HTML：

<p id="story"></p>

<div id="input-section">
<p>Fill in the blanks and then press "View story"</p>
<form>
  <table border="0" cellpadding="5"><tbody>
  <tr>
    <td>
      Adjective:
      <input type="text" name="input1" size="15">
    </td>
  </tr>
  <tr>
    <td>
      Adjective:
      <input type="text" name="input2" size="15">
    </td>
  </tr>
  <tr>
    <td>
      Plural Noun:
      <input type="text" name="input3" size="15">
    </td>
  </tr>
  <tr>
    <td>
      Verb (ending in 'ing'):
      <input type="text" name="input4" size="15">
    </td>
  </tr>
  <tr>
    <td>
      Edible Object:
      <input type="text" name="input5" size="15">
    </td>
  </tr>
  <tr>
    <td>
      Monster:
      <input type="text" name="input6" size="15">
    </td>
  </tr>
  <tr>
    <td>
      Adjective:
      <input type="text" name="input7" size="15">
    </td>
  </tr>
  <tr>
    <td>
      Monster (again):
      <input type="text" name="input8" size="15">
    </td>
  </tr>
  <tr>
    <td>
      Verb (ending in 'ing'):
      <input type="text" name="input9" size="15">
    <td>
  </tr>
  </tbody></table>
</form>
<button id="make-story">View Story</button>
</div>

如何在HTML页面中显示JavaScript函数？

1 个答案: