Return Styles: Pseud0ch, Terminal, Valhalla, NES, Geocities, Blue Moon.

Pages: 1-

Referencing a Button form element

Name: Anonymous 2010-12-14 11:53

How do you reference a button's field? (name, in this case)

I want to change the link that the "link" id is set to, based on which of the 3 buttons is clicked.


<script>
function changeLink()
{
    switch(document.btnform.WHATTOPUTHERE?)
    {
        case "x":
            linkvar = "xml.htm";
            break;
        case "j1":
            linkvar = "java.htm";
            break;
        default:
            linkvar = "java2.htm";
    }
    document.getElementById("link").setAttribute("href", linkvar);;
}
</script>

<body>
        <a id="link">Go To Page</a>

        <br /><br />

        <form id="btnform">
        <input type="button" name="x" value="Set Link to XML Page" onclick="changeLink();" /><br />
        <input type="button" name="j1" value="Set Link to JS 1 Page" onclick="changeLink();" />
        <input type="button" name="j2" value="Set Link to JS 2 Page" onclick="changeLink();" />
        </form>

Name: Anonymous 2010-12-14 11:54

Ignore the double semicolon at the end of the script, that was a small oversight I already fixed.

Name: Anonymous 2010-12-14 11:57

>>2
actually your problem is not enough semicolons. Here's a few to get started.
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;

Name: Anonymous 2010-12-14 12:02

>>3
Don't do that, you know how delicate the semicolon economy is! You'll ruin us all!

Name: Anonymous 2010-12-14 12:04

Anyway
document.btnform.WHATTOPUTHERE?
does that even work?

Name: Anonymous 2010-12-14 12:07

jQuery

Name: Anonymous 2010-12-14 12:08

>>1
I won't do your homework, but here's a hint, it's easy to do this.

Name: Anonymous 2010-12-14 12:10

>>5

Well, otherwise I need to set the button to a value within the function, so I can use that in the switch statement to decide which linkvar value to use. I mean it's 95% done but I don't know how to reference the button name in the function.

>>7

Name: Anonymous 2010-12-14 12:12

Well shit...can you even do it with buttons?

I can reference a select, where the form name is bgcolor, the select name is color, and then get value from the specific select option:

document.bgcolor.color.value

What I need to figure out is how to do essentially the same thing for a form object like a button, or a textbox.

Name: Anonymous 2010-12-14 12:14

I could make the 3 buttons call 3 separate functions, but that's redundant and defeats the purpose of figuring out how to reference a button. (The homework doesn't specify either way, but I figure I'd get more out of it if I could find how to reference the goddamned button)

Name: Anonymous 2010-12-14 12:20

Thanks for the help, I figured it out.

Final code:


<script>
function changeLink(btn)
{
    switch(btn)
    {
        case "Set Link to XML Page":
            linkvar = "xml.htm";
            break;
        case "j1":
            linkvar = "java.htm";
            break;
        default:
            linkvar = "java2.htm";
    }
    document.getElementById("link").setAttribute("href", linkvar);
}
</script>

<body>
        <p>
        Change the Link With Buttons<br /><br />
        <a id="link">Go To Page</a>
        </p>

        <br /><br />

        <form id="btnform">
        <input type="button" name="x" value="Set Link to XML Page" onclick="changeLink(x.value);" /><br />
        <input type="button" name="j1" value="Set Link to JS 1 Page" onclick="changeLink(j1.value);" />
        <input type="button" name="j2" value="Set Link to JS 2 Page" onclick="changeLink(j2.value);" />
        </form>

Name: Anonymous 2010-12-14 12:22

^ Well, semi-final. Just needed to replace the string for case "j1" to finish it off.

>>7
and I get what you mean, this.value for an object is easier than having to give it a name then using name.value

Name: Anonymous 2010-12-15 21:46

<script>
function changeLink(evt) {
    document.getElementById("link").setAttribute("href",
        (evt.target.id === "x"
            ? "xml.htm"
            : evt.target.id === "j1"
                ? "java.htm"
                : "java2.htm")
    );
}

document.addEventListener("DOMContentLoaded", function() {
    var names = ["x","j1","j2"];
    for (var i=0; i < names.length; i++) {
      document.getElementById(names[i]).addEventListener("click", changeLink, false);
    }
}, false);
</script>

<body>
    <p>Change the link with buttons</p>
    <p><a id="link">Go to page</a></p>
    <button id="x">Set Link to XML Page</button><br/>
    <button id="j1">Set Link to JS 1 Page</button><br/>
    <button id="j2">Set Link to JS 2 Page</button>
</body>

Name: Anonymous 2011-02-04 12:47

Don't change these.
Name: Email:
Entire Thread Thread List