将用户输入值传递给随机文本字符串

Question

I am trying to create a topic generator. I want to pass a user input value into a sentence. For example, I want a user to give me a keyword like Dog, then I want that user input to be passed as a variable to a random string of text. eg: Top 5 Ways to Clean A Dog

Here is what I currently have:

var randomStrings = [
    "Top 5 Ways To insert user input here ",
    "hello 2",
    "hello 3",
    "hello 4",
    "hello 5",
    "hello A",
    "hello B",
    "hello C",
    "hello D",
    "hello E"  // Note: No comma after last entry
];
function RndMsg() {
  var msg = randomStrings[Math.floor(Math.random()*randomStrings.length)];
  document.getElementById('randomDiv').innerHTML = msg;
}

The HTML looks like this:

<form action="" method="post" onsubmit="return false">
 <h2>Select a keyword to optimize for</h2>
  <input placeholder="Keyword" type="text" id="keyword" name="user-input" required="">
  <input class="button" type="button" value="Generate" name="sessionid" onclick="RndMsg()"/>
</form>

<div >
 <p id="randomDiv"></p>
</div>

Answer 1

See the updated code below,

 var randomStrings = [ "Top 5 Ways To insert user input here ", "hello 2", "hello 3", "hello 4", "hello 5", "hello A", "hello B", "hello C", "hello D", "hello E" // Note: No comma after last entry ]; function RndMsg() { var msg = randomStrings[Math.floor(Math.random()*randomStrings.length)]; var newMsg= ''; $.each(randomStrings, function(i, str){ if (str === msg){ newMsg = str + ' ' + $('#keyword').val(); randomStrings[i] = newMsg; return false; } }); document.getElementById('randomDiv').innerHTML = newMsg; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form action="" method="post" onsubmit="return false"> <h2>Select a keyword to optimize for</h2> <input placeholder="Keyword" type="text" id="keyword" name="user-input" required=""> <input class="button" type="button" value="Generate" name="sessionid" onclick="RndMsg()"/> </form> <div > <p id="randomDiv"></p> </div> 

Answer 2

Here is what I would do;

<form action="" method="post" onsubmit="return false">
 <h2>Select a keyword to optimize for</h2>
  <input placeholder="Keyword" type="text" id="keyword" name="user-input" required="">
  <input class="button" type="button" value="Generate" name="sessionid" id="generate"/>
</form>

<div >
 <p id="randomDiv"></p>
</div>

and:

var randomStrings = [ //random string to attach to
    "Top 5 Ways To",
    "hello 2",
    "hello 3",
    "hello 4",
    "hello 5",
    "hello A",
    "hello B",
    "hello C",
    "hello D",
    "hello E"  // Note: No comma after last entry
];

var generate = document.getElementById('generate'); // grab the button from the html
//when the button is clicked do this function
generate.onclick= function () { 
//since the keyword can change, get it every time the user clicks generate and he gets a new topic
  var keyword = document.getElementById('keyword').value;
  var msg = randomStrings[Math.floor(Math.random()*randomStrings.length)];
//when inserting data written by the user into the page DO NOT USE INNERHTML! they can insert code here! use text content instead.
  document.getElementById('randomDiv').textContent = msg + " " + keyword;
}

Hope this helps!