Richiamare funzioni da file .js esterno e modificarle

**Pescatore550** · 12-07-2013, 11:56

Ciao!!
Allora ho una pagina html e un foglio .js esterno con questo codice:

codice:

var canvas = document.getElementById("tela"); 
var context = canvas.getContext("2d"); 
context.fillStyle = "green"; 
context.fillRect(100,60,200,70);

Nella pagina html c'è un box di tipo testo nel quale inserisco il nome di un colore e quando premo un button questo colore viene salvato in una variabile. Ora, come faccio a fare in modo che il colore salvato in questa variabile vada nel context.fillStyle al posto del green?

**Vindav** · 12-07-2013, 12:24

se è una variabile globale:

context.fillStyle = nomeVariabile;

**Pescatore550** · 12-07-2013, 12:31

codice:

<script type="text/javascript" charset="utf-8"> 
function controlla(){ 
var myFieldVal = document.MyForm.prova.value; 
} 
</script> 

<body>


 Per cambiare colore scrivi un colore in inglese e poi clicca su Cambia 
<form name="MyForm"> 
<input type="text" name="prova" /> 
<input type="button" value="Cambia" onClick="controlla()" /> 
</form>

Questo è il codice all'interno della pagina in html, ho provato come mi hai scritto tu ma non mi funziona.

**Pescatore550** · 12-07-2013, 12:39

Ok risolto mettendo tutto il codice direttamente all'interno della pagina html, solo che volevo capire se era possibile farlo anche col codice salvato in un file .js esterno

**bstefano79** · 12-07-2013, 13:00

potresti fare una richiesta ajax nel file js e salvarti il colore sul server

**Pescatore550** · 12-07-2013, 13:37

Era una stupidata, dovevo inserire tutto il codice nel file esterno...

Ora però è sorto un altro problema...

codice:

<input type="text" name="prova" onkeypress="if(event.keyCode==13) {controlla()}"/>
 <input type="button" value="Cambia" onClick="controlla()" />

Vorrei che la stessa funzione parta sia che io clicchi sul button, sia che io prema in tasto invio.
Col codice che ho messo, quando premo invio il colore cambia ma solo per mezzo secondo, poi torna come prima, ho provato a mettere anche onkeydown e onkeyup ma il risultato è sempre lo stesso, qualche suggerimento?

**bstefano79** · 12-07-2013, 14:09

posta tutto il codice

**Pescatore550** · 12-07-2013, 14:24

allora in js il codice è questo:

codice:

function invio() { 
if (event.keyCode==13) {controlla()} 
} 

function controlla(){ 
var myFieldVal = document.MyForm.prova.value; 
var canvas = document.getElementById("tela");
 var context = canvas.getContext("2d"); 
context.fillStyle = myFieldVal; 
context.fillRect(100,60,200,70); }

nell'html è questo:

codice:

 Per cambiare colore allo sfondo, scrivi un colore in inglese e poi clicca su Cambia</p>
<form name="MyForm"> 
<input type="text" name="prova" onkeypress="invio()" /> 
<input type="button" value="Cambia" onClick="controlla()" /> 
</form> 
<canvas id="tela" width="400" height="200">
</canvas> 
<script type="text/javascript" src="tela.js" charset="utf-8"> </script>

**Vindav** · 12-07-2013, 14:41

codice:

<input type="text" name="prova" onkeypress="invio(event)" /> 

function invio(e) { 
if (e.keyCode==13) controlla(); 
}

**Pescatore550** · 12-07-2013, 14:46

niente da fare, vi metto il link così vedete cosa succede

http://provaformgio.altervista.org/M...erno/home.html

Discussione: Richiamare funzioni da file .js esterno e modificarle

Strumenti discussione

Ricerca discussione

Visualizza

Richiamare funzioni da file .js esterno e modificarle

Permessi di invio