Image dans un input (bouton) ? [Fermé]

@urel - 23 janv. 2008 à 17:27 - Dernière réponse :  Aurelien
- 14 avril 2008 à 11:54
Bonjour,
j'ai ce code html+javascript qui est une calculatrice scientifique que j'ai transformé en stantard (pas dans cet exemple) mais le probleme est que je n'arrive pas à remplacer les inputs par les boutons que j'ai crée (ils apparaissent mais ne sont plus reconnu en tant que bouton:: je n'ai aucune connaissances en javascript). quelqu'un aurait il une solution ? ... merci d'avance.

<html>
<head>
<title>Calculatrice en JavaScript</title>
<style type=text/css>
INPUT{width:100%;}
</style>
<script language=JavaScript>
var MyForm;
var Aff="";
var Calc="";
var IsOpPressable=false;
var IsDotPressable=true;
var HasCalculate=false;

function NumPress(touche){
	if(!IsOpPressable || HasCalculate){
		Aff="";
		HasCalculate=false;
		IsDotPressable=true;
	}
	Aff+=parseInt(touche.value);
	IsOpPressable=true;
	Refresh();
}

function OpPress(touche){
	if(IsOpPressable){
		Calc+=Aff + touche.value;
		Aff=touche.value;
		IsOpPressable=false;
	}
	Refresh();
}

function Calculate(){
	Calc+=Aff;
	Aff=eval(Calc);
	Calc="";
	IsOpPressable=true;
	HasCalculate=true;
	Refresh();
}

function Refresh(){
	MyForm.affichage.value=Aff;
}

function DotPress(){
	if(IsDotPressable){
		Aff+=".";
		IsDotPressable=false;
	}
	Refresh();
}

function Init(){
	MyForm=document.forms["calculatrice"];
}

function Trans(touche){
	Aff=eval("Math." + touche.name + "(" + parseInt(Aff) + ");");
	HasCalculate=true;
	Refresh();
}

function PIPress(){
	Aff=Math.PI;
	IsDotPressable=false;
	Refresh();
}

function Euro(how){
	if(how)Aff=parseInt(Aff) / 6.55957;
	else Aff=parseInt(Aff) * 6.55957;
	HasCalculate=true;
	Refresh();
}

function Convert(base){
	Aff=(new Number(Aff)).toString(base);
	HasCalculate=true;
	Refresh();
}

function Reset(){
	HasCalculate=false;
	IsDotPressable=true;
	IsOpPressable=false;
	Aff="";
	Calc="";
	Refresh();
}

function Clear(){
	Aff="";
	Refresh();
}
</script>
</head>

<body onLoad="Init();">
<font face=arial size=1>
	<h2 align=center>Calculatrice</h2>
	Une modeste calculatrice...<br>
	<br>
</font>
<form name=calculatrice>
	<table border=1 cellpadding=0 cellspacing=0>
	<tr>
		<td>
			<table border=0>
			<tr>
				<td colspan=8>
					<input type=text name=affichage>
				</td>
			</tr>
			<tr>
				<td>
					<input type=button name=but7 value=" 7 " onClick="NumPress(this);">
				</td>
				<td>
					<input type=button name=but8 value=" 8 " onClick="NumPress(this);">
				</td>
				<td>
					<input type=button name=but9 value=" 9 " onClick="NumPress(this);">
				</td>
				<td>
					<input type=button name=div value=" / " onClick="OpPress(this);">
				</td>
				<td>
					<input type=button name=sin value=" sin " onClick="Trans(this);">
				</td>
				<td>
					<input type=button name=asin value=" sin-1 " onClick="Trans(this);">
				</td>
				<td>
					<input type=button name=euro value=" -> € " onClick="Euro(true);">
				</td>
				<td>
					<input type=button name=reset value= " AC " onClick="Reset();";
				</td>
			</tr>
			<tr>
				<td>
					<input type=button name=but4 value=" 4 " onClick="NumPress(this);">
				</td>
				<td>
					<input type=button name=but5 value=" 5 " onClick="NumPress(this);">
				</td>
				<td>
					<input type=button name=but6 value=" 6 " onClick="NumPress(this);">
				</td>
				<td>
					<input type=button name=prod value=" * " onClick="OpPress(this);">
				</td>
				<td>
					<input type=button name=cos value=" cos " onClick="Trans(this);">
				</td>
				<td>
					<input type=button name=acos value=" cos-1 " onClick="Trans(this);">
				</td>
				<td>
					<input type=button name=francs value=" -> Fr " onClick="Euro(false);">
				</td>
				<td>
					<input type=button name=clear value=" C " onClick="Clear();">
				</td>
			</tr>
			<tr>
				<td>
					<input type=button name=but1 value=" 1 " onClick="NumPress(this);">
				</td>
				<td>
					<input type=button name=but2 value=" 2 " onClick="NumPress(this);">
				</td>
				<td>
					<input type=button name=but3 value=" 3 " onClick="NumPress(this);">
				</td>
				<td>
					<input type=button name=moins value=" - " onClick="OpPress(this);">
				</td>
				<td>
					<input type=button name=tan value=" tan " onClick="Trans(this);">
				</td>
				<td>
					<input type=button name=atan value=" tan-1 " onClick="Trans(this);">
				</td>
				<td>
					<input type=button name=log value=" log " onClick="Trans(this);">
				</td>
				<td>
					<input type=button name=bin value=" bin " onClick="Convert(2);">
				</td>
			</tr>
			<tr>
				<td>
					<input type=button name=but0 value=" 0 " onClick="NumPress(this);">
				</td>
				<td>
					<input type=button name=dot value=" . " onClick="DotPress();">
				</td>
				<td>
					<input type=button name=enter value=" = " onClick="Calculate();">
				</td>
				<td>
					<input type=button name=plus value=" + " onClick="OpPress(this);">
				</td>
				<td>
					<input type=button name=sqrt value=" sqr " onClick="Trans(this);">
				</td>
				<td>
					<input type=button name=pi value=" PI " onClick="PIPress()">
				</td>
				<td>
					<input type=button name=exp value=" exp " onClick="Trans(this);">
				</td>
				<td>
					<input type=button name=hex value=" hex " onClick="Convert(16);">
				</td>
			</tr>
			</table>
		</td>
	</tr>
	</table>
</form>
</body>
</html>

Afficher la suite 

2 réponses

0
Utile
1
C'à y j'ai trouvé la solution il fallait un type="image" mais sauf que cela provoque un retour au sommet de la page.
C'est parce que le type="image" est en fait comme le type submit, donc il envoi le formulaire alors que tu n'en a pas besoin.
Pour remedier à ça, rajoute ceci dans la balise <form> :
<form name=calculatrice onsubmit="return false">

cela permet de ne pas envoyer le formulaire lorsque l'on clique sur un input submit ou image.