Vraag & Antwoord

Webprogrammeren & scripting

[JS] select >> onChange javascript functie

Anoniem
maIRnaairruJ
10 antwoorden
  • Hi,

    Je kent ze wel, van die javascript dropdowns / selects die onChange naar een pagina doorverwijzen (zoals hieronder in het forum). Nu vroeg ik me af of er ook een manier is om onChange een javascript functie uit te voeren. Dus onChange de functie editThis() uitvoeren, maar in dezelfde dropdown ook onChange andere functies uitvoeren.

    (Hoe) Is dit mogelijk?
  • Welkom op het forum !

    Zoiets ?

    [code:1:ee3821e1da]
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <SCRIPT language=JavaScript>
    function doe_iets(val) {
    switch (val)
    {
    case 'kleur':
    document.bgColor = '#FF0000'
    break
    case 'pagina':
    document.location.href = "http://www.google.nl"
    break
    case 'hallo':
    alert("Hallo, alles goed ?")
    break
    }
    }
    </SCRIPT>
    <body bgcolor="#FFFFFF" text="#000000">
    <select name="lijstje" onchange=javascript:doe_iets(this.value)>
    <option value="kleur">Wijzig Kleur</option>
    <option value="pagina">Ga naar pagina</option>
    <option value="hallo">Zeg hallo</option>
    </select>
    </body>
    [/code:1:ee3821e1da]
  • Thanks voor het welkom heten!

    Uhm ja, dat is wel waar ik zo'n beetje naar op zoek ben.
    Maar kan ik ook onder die case een ander functie aanroepen / meerdere statements afgaan, dus:

    [code:1:4858b581ab]
    case 'kleur':
    if ( dit == dat )
    alert ('blaat')
    else
    alert ('blaaaaat')
    break;
    [/code:1:4858b581ab]

    Daarnaast moet ik soms bijvoorbeeld een id meegeven, bijvoorbeeld editThis ( 4 ), waarbij 4 de pagina ID is. kan ik deze op de een of andere manier ook nog meegeven?
  • Dat kan, zo bijvoorbeeld :

    [code:1:c2d219b6a3]
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <SCRIPT language=JavaScript>
    function doe_iets(array) {
    var my_array=array.split(",");
    var id = my_array[1];
    switch (my_array[0])
    {
    case 'kleur':
    if (id == '##00FF00') {alert("groen is een mooie kleur he ?")};
    document.bgColor = id;
    break
    case 'pagina':
    document.location.href = id
    break
    case 'hallo':
    alert("Hallo "+id+" alles goed ?")
    break
    }
    }
    </SCRIPT>
    <body bgcolor="#FFFFFF" text="#000000">
    <select name="lijstje" onchange=javascript:doe_iets(this.value)>
    <option value="kleur,##00FF00">Wijzig Kleur groen</option>
    <option value="kleur,##FF0000">Wijzig Kleur rood</option>
    <option value="pagina,http://www.google.nl">Ga naar pagina</option>
    <option value="hallo,meneer de koekepeer">Zeg hallo</option>
    </select>
    </body>
    [/code:1:c2d219b6a3]
  • Toppertje!
    Ik ga dit vanavond eens even proberen!

    Bedankt voor de hulp!
  • n.a.v. het antwoord van Error404:
      [*:42867f24b3]in een eventhandler hoort geen
  • Ok annie ! Je hebt gelijk

    [code:1:2fc732f80a]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <title></title>
    <meta http-equiv = "Content-Type" content = "text/html; charset=iso-8859-1">

    <SCRIPT type = "text/javascript">
    function doe_iets(array)
    {
    var my_array = array.split(",");
    var id = my_array[1];

    switch (my_array[0])
    {
    case 'kleur':
    if (id == '#00FF00'){
    alert("groen is een mooie kleur he ?")
    } ;
    document.bgColor = id;
    break

    case 'pagina':
    document.location.href = id
    break

    case 'hallo':
    alert("Hallo " + id + " alles goed ?")
    break
    }
    }
    </SCRIPT>
    </head>

    <body>
    <select name = "lijstje" onchange = "doe_iets(this.options[this.selectedIndex].value)">
    <option value = "kleur,#00FF00"> Wijzig Kleur groen</option>
    <option value = "kleur,#FF0000"> Wijzig Kleur rood</option>
    <option value = "pagina,http://www.google.nl"> Ga naar pagina</option>
    <option value = "hallo,meneer de koekepeer"> Zeg hallo</option>
    </select>
    </body>
    [/code:1:2fc732f80a]
  • @Error404:
    Ik had alleen even de punten die van toepassing waren voor meneer de koekepeer (what's in a name) genoemd.
    Dus als je nog wat meer verbeteringen wil doorvoeren dan staat hieronder nog wat gratis advies :D

    Dit werkt wel, [code:1:f33beecedc]document.bgColor = "#RRGGBB";[/code:1:f33beecedc]maar als ik de javascript references mag geloven dan zou je alleen de hexadecimalen moeten vermelden.
    [code:1:f33beecedc]document.bgColor = "RRGGBB";[/code:1:f33beecedc]

    Verder is deze wijze van aanspreken van document eigenschappen een beetje ouderwets.
    Als je helemaal hip :wink: wil zijn dan stuur je het document aan via de DOM (Document Object Model). Er zijn meerdere methoden waarop je dat kan aanpakken (maar niet alles wordt even goed ondersteund door de verschillende browsers: een overzichtje), maar een veel geziene versie is dan:
    [code:1:f33beecedc]document.getElementsByTagName("BODY")[0].style.backgroundColor = "#RRGGBB";[/code:1:f33beecedc]

    De [i:f33beecedc]location [/i:f33beecedc]wijzig je via het [i:f33beecedc]window [/i:f33beecedc]object en niet via het [i:f33beecedc]document [/i:f33beecedc], dat is hartstikke deprecated/fout.
    [code:1:f33beecedc]window.location.href = "index.html";[/code:1:f33beecedc]
  • is de correcte syntax van een hexwaarde in javascript, of iig ecma-262 niet 0xRRGGBB?

    document.bgColor = 0xRRGGBB;
  • [quote:7ad8f04c61="maIRnaairruJ"]is de correcte syntax van een hexwaarde in javascript, of iig ecma-262 niet 0xRRGGBB?

    document.bgColor = 0xRRGGBB;[/quote:7ad8f04c61]
    Om een hexadecimale waarde te schrijven is 0x00 inderdaad de juiste methode, daarin heb je gelijk.
    Alleen wordt een kleur opgegeven in 3 hexadecimalen: 0xRR, 0xGG en 0xBB (en dat is dus wat anders dan 0xRRGGBB). Daarnaast verwacht de bgColor property een string-waarde en geen getal.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.