如何使輸入的文本字段中的值出現在HTML句子中

我正在做一個任務，我必須編寫10個隨機語句，並且必須創建文本字段。這些文本字段應該包括我在句子中放入的任何內容。我需要幫助的代碼將包括在句子中的單詞。我想我已經想通了，除了當我在「名稱」中輸入某些內容時，它只顯示我輸入的一個字母而不顯示整個單詞。如何使輸入的文本字段中的值出現在HTML句子中

這裏是我的HTML：

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Assignment 4</title> 
<h1> Assignment 4 - Sample Solution </h1> 
</head> 
<body> 
<p> 
    Name:   <input type="text" id = "input" value= "names" size="10" /> 
    <br /> 

    Verb Phrase: <input type="text" id = "input2" value="verbs" size="10" /> 
    <br /> 

    Adjective: <input type="text" id = "input3" value="adjs" size="10" /> 
    <br /> 

    Noun:   <input type="text" id = "input4" value="nouns" size="10" /> 
    <br /> 
HOW MANY SENTENCES? <select id = "numOfSentences" size = "1"> 

    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
    <option>6</option> 
    <option>7</option> 
    <option>8</option> 
    <option>9</option> 
    <option>10</option> 
</select> 

<button id = "displaySilly"> 
    Display Silly 
</button> 
<p id = "output"></p> 
<script src = "silly.js"></script> 
</body> 
</html>

這裏是我的JS。

//arrays containing values for sentence components 
var names = ["Alice","Rowena","Carol","David","Erin"]; 
var verbs = ["jumped on", "ran from", "scolded", "yelled at","talked to"]; 
var adjs = ["yellow","big","smelly","hairy","bad"]; 
var nouns = ["bear","tree","rock","student","instructor"]; 

// variables for the sentence components 
var name, verb, adj, noun; 

//when window loads 
window.onload = function() { 
    var names =  document.getElementById("input"); 
    names.value = null; 
    var verbs = document.getElementById("input2"); 
    verbs.value= null; 
    var adjs = document.getElementById("input3"); 
    adjs.value= null; 
    var nouns = document.getElementById("input4"); 
    nouns.value= null; 
} 


// display what is put into the text fields in the sentences 
//names.push(document.getElementById('input').value); 
//verbs.push(document.getElementById('input2').value); 
//adjs.push(document.getElementById('input3').value); 
//nouns.push(document.getElementById('input4').value); 

// display silly sentences 
document.getElementById('displaySilly').onclick = function() { 

    var names = document.getElementById("input").value; 
    document.getElementById("output").innerHTML = names; 

    // get number of sentences from drop down 
    var numOfSentences = 
     document.getElementById('numOfSentences').value; 
    //convert to integer 
    numOfSentences = parseInt(numOfSentences); 
    // initialize results string 
    var results = ""; 
    // create required number of silly sentences 
    for (var i = 1 ; i <= numOfSentences ; i++) { 
     //pick components at random from arrays 
     name = 
      names[Math.floor(Math.random() * names.length)]; 
     verb = 
      verbs[Math.floor(Math.random() * verbs.length)]; 
     adj = 
      adjs[Math.floor(Math.random() * adjs.length)]; 
     noun = 
      nouns[Math.floor(Math.random() * nouns.length)]; 
    // concatenate to form a sentence 
    // add to other sentences 
    results = results + name + " " + verb + 
       " the " + adj + " " + noun + 
       ".<br />"; 
} 


// display the silly sentences 
document.getElementById('output').innerHTML = results; 
} //*** END onclick handler

我需要與

var names = document.getElementById("input").value; 
    document.getElementById("output").innerHTML = names;

謝謝你們的幫助

來源

2015-04-04 Rowena

nope工作正常。 http://jsfiddle.net/btevfik/cxw9pt41/ – btevfik 2015-04-04 01:08:10

你有相同的標識符不同的變量;例如，稱爲names的三個變量。而臨近年底，當你從陣列讀取與

names[Math.floor(Math.random() * names.length)];

是不一樣的names含姓名的陣！

所以解決方案是給所有這些names不同的名稱。

來源

2015-04-04 11:58:24

謝謝！那真的很有用 – Rowena 2015-04-06 16:34:43

好的。如果你願意，你可以點擊左邊的複選標記，將這個問題標記爲已回答。否則，它將留在未解答的問題列表中！ – 2015-04-06 18:11:09

如何使輸入的文本字段中的值出現在HTML句子中

回答

相關問題