如何在HTML頁面中顯示JavaScript函數？

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>均未關閉。 不要使用內聯javascript（在HTML中onclick ）。 用它所屬的javascript編寫-參見下面的示例。 現場演示在這里（單擊）。

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 個解決方案

解決方案1
0 已采納 2013-11-24 06:52:43

如何在HTML頁面中顯示JavaScript函數？

問題描述

1 個解決方案

解決方案1 0 已采納 2013-11-24 06:52:43

解決方案1
0 已采納 2013-11-24 06:52:43