Using custom keywords to set link in javascript

Question

The script implications are more advanced, but I've condensed it down to this following problem:

In a nutshell I have some keyword variables set with javascript. These keyword variables contain URLs. What I need is when a person inputs a keyword he will be taken to a specific URL. I've created a sample page illustrating my problem:

<a href=""  class="link">LINK</a><br>
<input type="text"  class="text" value="hallo" />
<input type="button" onclick="check();" value="Click ME">

<script type="text/javascript">
function check() {
    var key1 = "some_link1.com";
    var key2 = "some_link2.com";
    var key3 = "some_link3.com";

    var l = document.getElementsByClassName("link")[0];
    var t = document.getElementsByClassName("text")[0];
    if (t.value == "key1" || t.value == "key2" || t.value == "key3") {
        l.href = t.value;
        alert(t.value);
    } }</script>

The problem lies between the ** because the script must recognize that the value corresponds to the variable and use thet value instead. However currently I'm only getting the inputted value. By the way I can't use a form or reload the page. It has to happen "live".

Any thoughts?

PS. the script is not meant to run, but to illustrate my point: http://jsfiddle.net/UhgKG/3/

`getElementsByClassName` gives you an array not an element, so your `t.value` will be *undefined* — Majid Fouladpour, Sep 24 '11 at 02:11
Yeh I see that please disregard that because it's not the problem.. — Andreas Jarbol, Sep 24 '11 at 02:14

Majid Fouladpour · Answer 1 · 2011-09-24T02:46:32.857

0

<a href="" id="link">LINK</a><br>
<input type="text" id="text" value="hallo" />
<input type="button" onclick="check();" value="Click ME">

<script type="text/javascript">
function check() {
    var key1 = "some_link1.com";
    var key2 = "some_link2.com";
    var key3 = "some_link3.com";

    var l = document.getElementById("link");
    var t = document.getElementById("text").value;
    if (t == "key1" || t == "key2" || t == "key3") {
        l.href = eval(t); // no risk as we run this line if and only if the value is one of the options defined in the if
        alert(t);
    }
}
</script>

edited Sep 24 '11 at 02:46

answered Sep 24 '11 at 02:16

Majid Fouladpour

29,356
21
76
127

`eval()`... Yeah, that is a bad idea. Could use an associative array. – Jared Farrish Sep 24 '11 at 02:18
Although, we can argue that the visitor can do mischief only to his loaded copy of the page, if he chooses to, let him enjoy it ;) – Majid Fouladpour Sep 24 '11 at 02:23
Well, I believe that it's bad form to demonstrate the use of `eval()`. It's the only part of your answer I don't agree with. `:)` – Jared Farrish Sep 24 '11 at 02:25
@Andreas - There are two issues mainly, performance (`eval()` is slow), and potential security issues. http://stackoverflow.com/questions/197769/when-is-javascripts-eval-not-evil – Jared Farrish Sep 24 '11 at 02:27
@Jared Farrish - I just realized there is no danger in using eval in this case, I do not believe there is *any* noticeable difference in performance between using `eval` to get the value of a variable and other methods. Still, I find your method cleaner. – Majid Fouladpour Sep 24 '11 at 02:50

jfriend00 · Accepted Answer · 2011-09-24T03:57:17.857

Partly because I avoid eval() when there are other ways, but also because it just seems cleaner, is more extensible and is less code, I'd do it like this with an object lookup rather than the separate variables, the multiple if tests and the eval:

<a href="" id="link">LINK</a><br>
<input type="text" id="text" value="hallo" />
<input type="button" onclick="check();" value="Click ME">

<script type="text/javascript">
function check() {
    var keys = {
        key1: "some_link1.com",
        key2: "some_link2.com",
        key3: "some_link3.com"
    };

    var l = document.getElementById("link");
    var t = document.getElementById("text").value;
    if (t in keys) {
        l.href = keys[t];
        alert(t);
    }
}
</script>

Using custom keywords to set link in javascript

2 Answers2