我正在构建一个简单的随机单词生成器,并尝试拥有 <select>
下拉菜单确定要显示的字数。我的想法是拥有 <option>
的值包含我想要解析到函数中的变量。然而,它并没有像我希望的那样读取变量,就像在第一个 div 中那样,而是写入文字值。我确信有一种更优雅的方式来编写此内容,但现在我很好奇我是否可以这样做。
HTML:
<select id="wordCount" class="span2">
<option value="word1">1 Words</option>
<option value="word1+' '+word2">2 Words</option>
<option value="word1+' '+word2+' '+word3">3 Words</option>
<option value="word1+' '+word2+' '+word3+' '+word4">4 Words</option>
</select>
<input id="gen" type="submit" value="Generate">
<div id="wordBin"></div>
<div id="wordBin2"></div>
JavaSript:
$('#gen').click(function generateWords(){
var wordCount = document.getElementById('wordCount').value;
var wordbank = ['rock', 'paper', 'scissor', 'apple', 'beer', 'potato'];
var word1 = wordbank[Math.floor(Math.random()*wordbank.length)];
var word2 = wordbank[Math.floor(Math.random()*wordbank.length)];
var word3 = wordbank[Math.floor(Math.random()*wordbank.length)];
var word4 = wordbank[Math.floor(Math.random()*wordbank.length)];
var wordBin = document.getElementById('wordBin');
var wordBin2 = document.getElementById('wordBin2');
wordBin.innerHTML = word1+' '+word2+' '+word3+' '+word4;
wordBin2.innerHTML = wordCount;
});
最佳答案
我根本不推荐这样做,但您正在寻找的是eval
。我通过一个简单的更改更新了 fiddle :
wordBin.innerHTML = word1+' '+word2+' '+word3+' '+word4;
至
wordBin.innerHTML = eval(wordCount);
它的工作原理就像你想要的那样。然而,这是一种可怕的做事方式(正如你提到的那样)。如果您在值中存储计数并通过附加随机单词来循环计数,那就更好了。真正的 HTML/javascript 会像这样工作:
HTML:
<select id="wordCount" class="span2">
<option value="1">1 Words</option>
<option value="2" selected="selected">2 Words</option>
<option value="3">3 Words</option>
<option value="4">4 Words</option>
</select>
<input id="gen" type="submit" value="Generate">
<div id="wordBin"></div>
<div id="wordBin2"></div>
JS:
$('#gen').click(function generateWords() {
var wordCount = document.getElementById('wordCount').value;
var wordbank = ['rock', 'paper', 'scissor', 'apple', 'beer', 'potato'];
var finalMessage = "";
for (i = 0; i < parseInt(wordCount, 10); i++) {
if (i > 0) finalMessage += " ";
finalMessage += wordbank[Math.floor(Math.random() * wordbank.length)];
}
var wordBin = document.getElementById('wordBin');
var wordBin2 = document.getElementById('wordBin2');
wordBin.innerHTML = finalMessage;
wordBin2.innerHTML = wordCount;
});
更新的 fiddle : http://jsfiddle.net/N988s/2/
关于javascript - HTML 标签的 value 属性可以用来存储 JavaScript 代码吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24664021/