none
Ayuda con un btón de javascript RRS feed

  • Pregunta

  • Bueno pues quiero hacer que al hacer click a convert, que según un SELECT o otro haya una especie de pop-up que te diga una cosa o otra.

    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>

    lunes, 8 de diciembre de 2014 17:52

Todas las respuestas

  • Lo siento, no entiendo su pregunta completamente.

    Viendo el código y según su muy breve explicación, entiendo que quiere ejecutar código en el evento click del botón que veo en su HTML que ejecute algo según la selección del SELECT.

    Como no sé qué quiere hacer, explicaré lo más básico:

    function EjecutarConvert()
    {
        var dd = document.getElementById('elIDdelDD');
        var valor = dd.options[dd.selectedIndex].value;
        if (valor == 1)
        {
            //Una cosa.
        }
        else if (valor == 2)
        {
            //Otra cosa.
        }
        else if (..... //etc.
        //Aquí retornamos false si no queremos que la página
        //se envíe al servidor web, o true si sí queremos.
        return false;
    }


    Ese sería el código JavaScript de la función que se ejecutaría al clic del botón.  Eso sí, hay que hacer algunas modificaciones a su código HTML.

    En primer lugar, todos los elementos que se acceden por JavaScript deberían tener id's.  En segundo lugar, las opciones de un SELECT deberían siempre tener valores asociados.  Y finalmente, hay que asignar la función al onclick del botón.

    <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 ID="elIDdelDD" NAME="Euros"> 
    					
    					<OPTION value="1">5.00 €</OPTION>
    					<OPTION value="2">10.00 €</OPTION>
    					<OPTION value="3">20.00 €</OPTION>
    					<OPTION value="4">35.00 €</OPTION>
    					<OPTION value="5">50.00 €</OPTION>
    
    				</SELECT> 
    			
    				<br>
    				<br>
    			
    				<button type="submit" value="Submit" onclick="return EjecutarConvert()">Convert!</button> 
    
    				</div>
    		</div>
    </body>
    
    </html>



    Jose R. MCP
    Code Samples

    lunes, 8 de diciembre de 2014 18:43
    Moderador