[英]Can an HTML tag's value attribute be used to store JavaScript code?
我正在构建一个简单的随机单词生成器,并试图通过<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>
JavasSript:
$('#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
。 我用一个简单的更改更新了小提琴:
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;
});
更新的小提琴: http : //jsfiddle.net/N988s/2/
为什么不这样:
<select id="wordCount" class="span2">
<option value="1">1 Word</option>
<option value="2">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:
var wordbank = ['rock', 'paper', 'scissor', 'apple', 'beer', 'potato'];
$('#gen').click(function () {
var wordCount = document.getElementById('wordCount').value;
var wordBin = document.getElementById('wordBin');
words = '';
for (var i = 0; i < wordCount; i++) {
if (words != '') words += ' ';
words += getRandomWord();
wordBin.innerHTML = words;
}
});
function getRandomWord() {
return wordbank[Math.floor(Math.random()*wordbank.length)];
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.