11521 sujets

JavaScript, DOM et API Web HTML5

Propriete Style ne marche pas

Bonjour, j'ai un souci dans mon code, je souhaiterai changer le style en bold d'une partie de texte et je n'y arrive pas.

merci de votre aide

// Liste des questions à afficher. Une question est définie par son énoncé et sa réponse
var questions = [{
    enonce: "Combien font 2+2 ?",
    reponse: "2+2 = 4"
  },
  {
    enonce: "En quelle année Christophe Colomb a-t-il découvert l'Amérique ?",
    reponse: "1492"
  },
  {
    enonce: "On me trouve 2 fois dans l'année, 1 fois dans la semaine, mais pas du tout dans le jour... Qui suis-je ?",
    reponse: "La lettre N"
  }
];

var divResult = document.createElement("div");
divResult.setAttribute("class", "result");
document.querySelector("body").prepend(divResult);

for (var i = 0; i < questions.length; i++) {
  var quest = document.createElement("p");
  var formalite = "Question" + (i + 1);
  // cette ligne ne marche pas
  // formalite.setAttribute("fontWeight", "bold");
  // cette ligne non plus
  // formalite.style.fontWeight("bold");
  // cette ligne non plus
  formalite.style.fontWeight = "bold";
  quest.textContent = formalite + ": " + questions[i].enonce
  document.querySelector(".result").appendChild(quest);

  questions[i]
}
Modérateur
Salut,


Si je ne me trompe pas, la variable "formalite " est juste un texte non ? Tu peux pas vraiment coller de CSS sur un string... t'as essayé sur "quest" plutôt ?

Bonne journée
En fait Jencal même là j'était dans l'impasse. au passage j'ai vu le ";" qui manque Smiley smile

je vais essayer de créer un élément qui contient une span et peut-être modifier celle ci LAurent

quelque chose comme 


quest.innerHTML = <span>+formalite+</span> + ": " + questions[i].enonce;

+ QuerySelector sur le span et le modifer avec style.fontWeight...


mais je ne sais pas ce que sa donnera, je verrai.
Modérateur
Je pense que tu devrais plutôt passer par un 
document.createElement("span");

si tu veux creer un span.

Et effectivement si tu ne veux donner un style qu'au début du texte il vaut mieux lui mettre un span autour. D’ailleurs pour tout ce qui est style je te conseillerais plutôt de tout gérer en CSS si possible. Tu peux juste donner une classe à tes div et a tes span et tout gérer coté CSS grâce a ces classes. Ton Js n'en sera que plus léger et ton code plus maintenable.
bonjour, j'ai un peu travaillé mon code, encore et toujours désolé du temps que je mets pour répondre Smiley smile

Je me retrouve avec un autre problème, quand je demandes à afficher la réponse seule la 2ème réponse se dévoile quel que soit mon choix, je n'ai toujours pas pris en main ma console de deboguage, un tutoriel serait le bienvenu, même en Anglais mais pas de l'Allemand please Smiley smile 

// Liste des questions à afficher. Une question est définie par son énoncé et sa réponse
var questions = [{
    enonce: "Combien font 2+2 ?",
    reponse: "2+2 = 4"
  },
  {
    enonce: "En quelle année Christophe Colomb a-t-il découvert l'Amérique ?",
    reponse: "1492"
  },
  {
    enonce: "On me trouve 2 fois dans l'année, 1 fois dans la semaine, mais pas du tout dans le jour... Qui suis-je ?",
    reponse: "La lettre N"
  }
];

var divResult = document.createElement("div");
divResult.setAttribute("class", "result");
document.querySelector("body").prepend(divResult);

for (var i = 0; i < questions.length; i++) {
  var quest = document.createElement("p");
  var formalite = "Question" + (i + 1);

  quest.innerHTML = "<span>" + formalite + ": </span>" + questions[i].enonce;

  document.querySelector(".result").appendChild(quest);

  var btnReponse = document.createElement('button');
  btnReponse.textContent = "Afficher la réponse";
  document.querySelector(".result").appendChild(btnReponse);

  var Reponse = document.createElement('p');
  Reponse.textContent = questions[i].reponse;
  Reponse.setAttribute("class", "reponse");
  document.querySelector(".result").appendChild(Reponse);
  var rps = document.querySelectorAll(".reponse")
  rps[i].style.display = "none";

}

function afficheReponse() {
  var btns = document.querySelectorAll("button");
  var rps = document.querySelectorAll(".reponse")

  for (var i = 0; i < btns.length; i++) {
    btns[i].addEventListener("click", function() {
      this.style.display = "none";
      rps[1].removeAttribute('style');
      // rps[i].style.display = "block";
    })
  }
};
afficheReponse()
Sujet clos
Aller à