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

我是一名程序員學生，我遇到了我的Java腳本代碼:(如何在JavaScript頁面中顯示JavaScript函數？

我應該做一個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); 
}

哦，上帝，我希望我做了正確的代碼，這些塊....

來源

2013-11-24 user3026560

這裏是你如何使用數組和循環一個簡單的例子。你的html有很多問題 - 你錯過了<tbody>，你的錶行<tr>和<td>都沒有關閉。不要使用內聯JavaScript（在您的HTML中爲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>

來源

2013-11-24 06:52:43 m59

它工作得很好！我真的明白陣列是如何工作的，因爲這是我最大的問題，但在這個例子中似乎很清楚。非常感謝！這是一個很大的幫助。 – user3026560

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

回答

相關問題