Question

我正在尝试创建一个主题生成器。我想将用户输入值传递给句子。例如，我希望用户给我一个像Dog这样的关键字，然后我希望将用户输入作为变量传递给随机的文本字符串。 例如：清洁狗的五种方法

以下是我目前的情况：

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;
}

HTML看起来像这样：

<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

请参阅下面的更新代码，

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 2

这就是我要做的事情;

<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>

和

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;
}

希望这有帮助！

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

2 个答案: