5568 sujets

Sémantique web et HTML

Recherche code simple html/js et échange de données

bonjour,

en fait, je recherche un cours ou un tuto expliquant simplement:

1/ L'importation de HTML vers JS du contenu de balise text ou number;

2/ Une fonction JS pour traiter les nombres recueillis dans le HTML;

3/ introduire dans une balise <p> la fonction (qui contient donc un résultat de calcul) lors d'un click button différent de la balise <p>.

merci d'avance
Merci de l'info, mais PHP fera partie de mon programme quand j'aurais acquis un minimum avec javascript, ce qui n'est pas le cas Smiley biggol .
j'ai déja des livres html css javascript python php, des cours papiers, des cours en ligne etc... mais à part des exemples avec alert et console.log, pas grand chose qui se réintègre dans le html, c'est assez décevant de ce coté car les cours sont souvent dénués de profondeur, c'est dommage.
Modifié par draenizipan (10 Mar 2020 - 12:43)
Bonjour. Pour injecter des données dans le html vous pouvez creuser par exemple du côté de .innerHTML, ce sera un bon début. Voir aussi document.createElement(), setAttribute(), etc...

Un exemple :
result = document.createElement('div');
result.setAttribute('id', 'result');
document.body.appendChild(result);
document.getElementById('result').innerHTML = obj;


Un exemple en ligne : CodePen.
Modifié par Olivier C (10 Mar 2020 - 13:21)
Modérateur
Quant au traitement des nombres, il faut regarder autour des objets suivants:

Math (fonctions mathématiques diverses):

Math.round(1.3); // 1
Math.PI; // 3.14…
Math.cos(Math.PI); // Je ne m'en souviens plus [smile]


Number ou fonctions utiles:

let a = Number('123.1');
parseInt('123.1');
parseFloat('123.1');

let a = 12.4;
a.toFixed(2);  //  '12.40'

Modifié par kustolovic (10 Mar 2020 - 13:45)
Je vous donne mon code pour que ce soit plus clair (enfin pour moi cela ne l'est pas toujours...)
<!DOCTYPE html>
<html lang="fr">

<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
	<title>js</title>
	<style>
	</style>
</head>

<body>
<input type="text" id="chiffre1" placeholder="entrer un chiffre"/>
<br>
<input type="text" id="chiffre2" placeholder="entrer un chiffre"/>
<br>
<input type="button" value="calcul" id="boutonone" onclick="first();"/>
<input type="text" value="0" id="premierp"/>

	<script type="text/javascript" >
	
	function first(){
		let nombre1 = parseInt(document.getElementById("chiffre1").value);
		let nombre2 = parseInt(document.getElementById("chiffre2").value);
		let result = nombre1 + nombre2;
		premierp.toFixed(result);
	}
			document.getElementById("premierp").innerHTML = result1;
	</script>
</body>
</html>

Modifié par Felipe (10 Mar 2020 - 17:37)
Salut,

hum, c'est supposé faire quoi ce passage la ? : 

premierp.toFixed(result);


A priori il faut :
- supprimer cette ligne
- mettre la ligne en dessous à la place
- modifier la valeur au lieu du innerHtml


	function first(){
		let nombre1 = parseInt(document.getElementById("chiffre1").value);
		let nombre2 = parseInt(document.getElementById("chiffre2").value);
		let result = nombre1 + nombre2;
		/*premierp.toFixed(result);*/
		document.getElementById("premierp").value = result;
	}

Modifié par Mathieuu (11 Mar 2020 - 08:43)
Sujet clos
Aller à