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

Question

I'm building a simple random word generator and am trying to have a <select> drop-down determine the number of words to be displayed. My idea was to have the <option>'s value contain the variables I want to be parsed into my function. However, it doesn't read the variables as I'd hoped, like it does in the first div, and instead writes the literal values. I'm sure there's a more elegant way to write this, but now I'm curious if I can even do it this way.

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

Sure, but it is a terrible idea and tears are sure to follow. — Vivin Paliath
– Vivin Paliath, Commented Jul 9, 2014 at 21:23

entropic · Accepted Answer · 2014-07-09 22:40:05Z

2

I don't recommend this at all, but what you're looking for is eval. I've updated the fiddle with a simple change:

wordBin.innerHTML = word1+' '+word2+' '+word3+' '+word4;

to

wordBin.innerHTML = eval(wordCount);

and it works just like you want. However, that's a TERRIBLE way to do things (just as you alluded to). It would be much better if you stored a count in your values and looped through the count by appending the random word. The real HTML/javascript would work like this:

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

Updated Fiddle: http://jsfiddle.net/N988s/2/

edited Jul 9, 2014 at 22:40

answered Jul 9, 2014 at 21:42

entropic

1,68314 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ibrahim AshShohail Over a year ago

You should never use eval() unless your life depends on it.

entropic Over a year ago

@IbrahimAshShohail which is why I said it was a terrible idea :)

Ibrahim AshShohail Over a year ago

You can never emphasis this. And I would always hide the presence of such a method from beginners. If learn about it early, then tend to use it without releasing what bad things could this lead to. :)

entropic Over a year ago

Valid point. Updated the post for emphasis on terrible, just in case.

Ibrahim AshShohail · Accepted Answer · 2014-07-09 21:46:00Z

1

Why not this:

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

answered Jul 9, 2014 at 21:46

Ibrahim AshShohail

2,21216 silver badges19 bronze badges

1 Comment

Ibrahim AshShohail Over a year ago

This could tweak more, I know.

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related