Mostrar un mensaje diferente con JavaScript al pulsar un botón

Bueno pues lo que quiero hacer es que cuando hayas elegido una opción del <select> y pulses el botón Convert, en un cuadro de texto aparte se muestre un mensaje u otro en función de lo que elegiste en el <select>.

Código

<html>
    <head>
        <title>Riot Points Converter</title>
        <style type="text/css">
 
            * {
                font-family: 'Ubuntu', sans-serif;
                background-color: #252525;
                margin-top: 2.5%;
            }
            .e {
                float: left;
                margin-left: 25%;
                text-align: center;
 
            }
            .rp {
                float: right;
                margin-right: 25%;
                text-align: center;
                background-color: yellow;
 
            }
            .caixa {
                background-color: yellow;
            }
            .riot {
                background-color: yellow;
            }
        </style>
        <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
    </head>
 
    <body>
        <p align="center"><b>Riot Points Converter</b></center><p>          
 
        <div class="e">
 
            <div class="caixa">
 
                Euros:
 
                <br>
                <br>
 
                <select name="Euros"> 
 
                    <option>5.00 €</option>
                    <option>10.00 €</option>
                    <option>20.00 €</option>
                    <option>35.00 €</option>
                    <option>50.00 €</option>
 
                </select> 
 
                <br>
                <br>
 
                <button type="submit" value="Submit" onclick="">Convert!</button> 
 
                </div>
        </div>
</body>
 
</html>

Respuestas

Aquí tienes un ejemplo del código que podrías utilizar para mostrar un mensaje diferente cada vez que se pulsa el botón:

<html>
    <head>
        <meta charset="utf-8">
        <title>Riot Points Converter</title>
        <style type="text/css">
            body {
                font-family: 'Ubuntu', sans-serif;
                background-color: #252525;
                color: #FFF;
                margin-top: 2.5%;
            }
            h1 {
                font-size: 18px;
                text-align: center;
            }
            .e {
                float: left;
                margin-left: 25%;
                text-align: center;
 
            }
            .rp {
                float: right;
                margin-right: 25%;
                text-align: center;
                background-color: yellow;
 
            }
            .caixa {
                background-color: yellow;
                color: #252525;
            }
            .riot {
                background-color: yellow;
            }
 
            #mensaje {
                float: left;
                margin-left: 2%;
            }
        </style>
        <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
 
        <script type="text/javascript">
            window.addEventListener('load', function() {
                document.getElementById('conversor').addEventListener('click', function() {
                    var selector = document.getElementById('selector');
                    var valor_seleccionado = selector.options[selector.selectedIndex].value;
                    document.getElementById('mensaje').innerHTML = 'Has seleccionado la opción ' + valor_seleccionado;
                }, false);
            }, false);
        </script>
 
    </head>
 
    <body>
        <h1>Riot Points Converter</h1>
 
        <div class="e">
            <div class="caixa">
                <label for="selector">Euros:</label>
 
                <br><br>
 
                <select id="selector" name="Euros">
                    <option>5.00 €</option>
                    <option>10.00 €</option>
                    <option>20.00 €</option>
                    <option>35.00 €</option>
                    <option>50.00 €</option>
                </select>
 
                <br><br>
 
                <button type="submit" value="Submit" id="conversor">Convert!</button>
 
            </div>
        </div>
 
        <div id="mensaje"></div>
</body>
 
</html>

La clave de todo es el siguiente código JavaScript:

window.addEventListener('load', function() {
    document.getElementById('conversor').addEventListener('click', function() {
        var selector = document.getElementById('selector');
        var valor_seleccionado = selector.options[selector.selectedIndex].value;
        document.getElementById('mensaje').innerHTML = 'Has seleccionado la opción ' + valor_seleccionado;
    }, false);
}, false);

Para que funcione, ten en cuenta que algunos elementos HTML deben incluir un atributo id, ya que si no, el código se complica bastante. En este caso he creado los atributos conversor y selector, pero puedes utilizar los que quieras, siempre que los cambies tanto en el código HTML como en el código JavaScript.

@javiereguiluz

8 diciembre 2014, 13:58