J'essaie d'effectuer un calcul et de l'afficher dynamiquement en html.

Comment puis-je formater la sortie de texte uniquement dans une zone sélectionnée.

Le calcul (), générer attribuer la valeur de la puissance var.

Comment puis-je afficher le résultat au format suivant en html. Si possible, la méthode correcte dans la version Jquery et pure js.

Puissance nominale: 18 watts.

http://jsbin.com/yajoju

function calculation() {
  var num1 = document.getElementById("num1");
  var num2 = document.getElementById("num2");
  var power = (parseFloat(num1.value) * parseFloat(num2.value));

  console.log("Power = " + power + " watts");
  /* html output  */
  $("#resultpad").text("Rated Power :" + power + " watts");

  // Is it possible only to display the value of Variable power in bold text <strong>power</strong> watts
}
<script src="https://code.jquery.com/jquery-3.0.0.js"></script>

<body>
  <div id="inputForm">
    <p>Fill electrical ratings</p>
    <p>Voltage:
      <input type="text" name="num1" id="num1" />
    </p>
    <p>Current:
      <input type="text" name="num2" id="num2" />
    </p>
    <p id="resultpad"></p>
    <!-- outout generated by calculation() -->
    <p>
      <button onclick="calculation()">Submit</button>
    </p>
  </div>
</body>
0
rush dee 8 août 2016 à 07:58

3 réponses

Meilleure réponse

Utilisez simplement la méthode html () au lieu de text ()

$("#resultpad").html("Rated Power :<strong>" + power + "</strong> watts");

Ou sans utiliser jquery

document.getElementById("resultpad").innerHtml = "Rated Power :<strong>" + power + "</strong> watts";
2
SynXsiS 8 août 2016 à 06:06

(1) spécifier la classe dans le libellé: la classe sera plus utile car vous pouvez donner plus de CSS dans une seule classe

$("#resultpad").html("Rated Power :<span class='calculationText'>" + power + "</span > watts");

<style>
.calculationText
{
    font-weight:bold;
}

(2) Attribuer du html à l'élément au lieu du texte et modifiez votre fonction comme ci-dessous.

function calculation() {
    var num1 = document.getElementById("num1");
    var num2 = document.getElementById("num2");
    var power = (parseFloat(num1.value) * parseFloat(num2.value));

    console.log("Power = " + power + " watts");
    /* html output  */
    $("#resultpad").html("Rated Power :<strong>" + power + "</strong> watts");

    // Is it possible only to display the value of Variable power in bold text <strong>power</strong> watts
}
0
Sandip - Full Stack Developer 8 août 2016 à 05:13

Dans ce cas, vous devez envelopper votre texte dans une balise comme:

$("#resultpad").html("Rated Power :<strong>" + power + "</strong> watts");
0
Mayank Pandeyz 8 août 2016 à 05:03