Как внести значения, введенные в текстовое поле, в 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

У вас есть различные переменные с одинаковым идентификатором; например, три переменные, называемые names. А ближе к концу, когда вы читаете из массивов с

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

, что это не то же names как массив, содержащий имена!

Итак, решение состоит в том, чтобы дать всем этим names разные имена.

источник

2015-04-04 11:58:24

Спасибо! Это было действительно полезно – Rowena

ОК. Если вы хотите, вы можете щелкнуть галочку слева, чтобы отметить этот вопрос в ответ. В противном случае он останется в списке неотвеченных вопросов! –

Как внести значения, введенные в текстовое поле, в HTML-предложение

ответ

Смежные вопросы