Je débute en programmation Javascript (et même programmation en général). Pour m'entraîner j'ai créer une petite calculatrice en javascript.
function calculatrice(){
while (isNaN(nombre1 = prompt("Quel est le 1er nombre ?", "Votre premier nombre"))){
alert("Merci de rentrer un nombre");
nombre1;
}
if(nombre1 == null){
alert("Merci de votre visite.");
return;
}
while(isNaN(nombre2 = prompt("Quel est le 2ème nombre ?", "Votre deuxième nombre"))){
alert("Merci de rentrer un nombre");
nombre2;
}
if(nombre2 == null){
alert("Merci de votre visite.");
return;
}
var calcule = prompt("Quel calcule doit être effectué ?", "+, -, *, /");
switch (calcule){
case "+":
var résultat = parseFloat(nombre1)+parseFloat(nombre2);
alert(nombre1 + " " + "+" + " " + nombre2 + " " + "=" + "" + résultat);
break;
case "-":
var résultat = nombre1-nombre2;
alert(nombre1 + " " + "-" + " " + nombre2 + " " + "=" + " " + résultat);
break;
case "*":
var résultat = nombre1*nombre2;
alert(nombre1 + " " + "*" + " " + nombre2 + " " + "=" + " " + résultat);
break;
case "/":
var résultat = nombre1/nombre2;
alert(nombre1 + " " + "/" + " " + nombre2 + " " + "=" + " " + résultat);
break;
case null:
alert("Merci de votre visite.");
break;
default:
alert("ATTENTION ! Merci de bien écrire le type de calcule comme indiqué");
var calcule = prompt("Quel calcule doit être effectué ?", "+, -, *, /");
break;
}
}
var demande = confirm("Voulez vous utiliser la calculatrice ?");
if (demande == true){
calculatrice();
}else{
if (demande == false){
alert("Merci de votre visite");
}
}
Cependant la partie de la demande du type d'opération ne me plaît pas. En effet il y a plusieurs points négatifs. Tout d'abord il faut que l'utilisateurs tape lui même le bon signe pour que ça fonctionne. Ensuite si l'utilisateur se trompe une fois de signe, je n'arrive pas à relancer l'opération.
Pour palier à cela j'aimerais savoir si il est possible de créer des boutons en javascript (sans passer par un HTML) et surtout de quelle manière ?
var btn = document.createElement("BUTTON"); // Créer un élément <button>
var t = document.createTextNode("CLICK ME"); // Créer un noeud textuel
btn.appendChild(t); // Ajouter le texte au bouton
document.body.appendChild(btn); // Ajoute la balise <button> à la balise <body>
PS : Si tu est bloqué, n'hésite pas à demander de l'aide.
Cependant lorsque je tape document.getElementById(btn).onclick = alert("Un exemple") ça ne marche pas. Comment est-ce que je peut faire pour que l'événement onclick fonctionne svp ?
La méthode .getElementById() attend un paramètre qui est de type chaîne de caractères.
Le bouton créé est déjà élément HTML (même si pas encore ajouté à ton document). Il a donc déjà une propriété .onclick que tu pourras alimenter au besoin. Tu peux aussi utiliser la méthode .addEventListener() si tu souhaites ajouter plusieurs évènement à ton bouton.
Merci pour l'aide. J'ai juste 2 dernières question (et après normalement ça sera enfin bon ). Comment faire pour que les boutons s'affichent les uns en dessous des autres ? Et comment faire pour faire disparaître un bouton en cliquant sur un autre ? J'ai recherché des méthodes et j'ai tenté d'utiliser element.removeChild mais ça ne marche pas...
var btn = document.createElement("BUTTON"); // Créer un élément <button>
var t = document.createTextNode("CLICK ME"); // Créer un noeud textuel
btn.appendChild(t); // Ajouter le texte au bouton
document.body.appendChild(btn); // Ajoute la balise <button> à la balise <body>
btn.addEventListener("click", function() {
alert("You just clicked me!");
});
var button = document.createElement("BUTTON"); // Créer un élément <button>
var a = document.createTextNode("Clique"); // Créer un noeud textuel
button.appendChild(a); // Ajouter le texte au bouton
document.body.appendChild(button); // Ajoute la balise <button> à la balise <body>
button.addEventListener("click", function() {
alert("You just clicked me!");
element.removeChild(btn) // Est censé supprimer btn lorsque l'on clique sur button
});
Est-ce que j'ai fait une erreur ou est-ce que cette façon de faire ne peut juste pas fonctionner ?
J'imagine que c'est un entraînement, mais si tu veux pouvoir à l'avenir créer N boutons, je te conseille de faire tes constructions de boutons pour factoriser ton code.
Avec ce code :
"use strict";
var index;
function notitication(event) {
alert("Tu as cliqué sur le " + event.target.innerHTML.toLowerCase());
}
function notificationThenDestroy(event) {
notification(event);
document.body.removeChild(event.target);
}
for (index = 0; index < 5; index++) {
var button = document.createElement("button");
button.innerHTML = "Bouton " + (index + 1);
if (index != 0) {
button.addEventListener("click", notificationThenDestroy);
} else {
button.addEventListener("click", notification);
}
button.classList.add("top-left");
document.body.appendChild(button);
}
Je suis capable de créer mes 5 boutons dissimulés les uns sur les autres (si c'est ce que tu voulais faire). Mais je pourrais en faire autant que possible par le navigateurs si je le voulais, en changeant simplement un seul caractère de ces lignes quand tu aurais du faire énormément de lignes pour en avoir simplement 10.
Si tu remarques bien , j'utilise une classe CSS dont le code est le suivant :
Cela me permet encore une fois de factoriser le code pour ne pas avoir à dupliquer les lignes d'ajout de style en JavaScript.
Création de boutons avec Javascript
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Découvrir Angular, JavaScript ES6 et TypeScript, en 1 ou 2 soirées de lecture...