HTML标签的value属性可以用来存储JavaScript代码吗?

Can an HTML tag's value attribute be used to store JavaScript code?

本文关键字：存储 JavaScript 代码 标签 value 属性 HTML      更新时间：2023-09-26

我正在构建一个简单的随机单词生成器，我试图有一个<select>下拉确定要显示的单词数。我的想法是让<option>的值包含我想要解析到函数中的变量。但是，它没有像我希望的那样读取变量，就像它在第一个div中所做的那样，而是写入文字值。我相信有一种更优雅的方式来写它，但现在我很好奇我是否可以这样做。

JSFiddle

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)];
}
http://jsfiddle.net/N988s/3/

相关文章：