Miguel
Miguel

Reputation: 131

Adding a <p> element inside a DIV with javascript

I need to add a message inside this element using JavaScript.

<div id="messagePanel">
</div>

Here is the Javascript

    var calc = document.getElementById('form');

calc.addEventListener('submit', calculateAndPrintRisk);
var total;
var riskTotal;
var age;
var bmi;
var diet;
var diabetes;




function calculateRisk() {

  age = document.querySelector('input[name="age"]:checked').value;
  bmi = document.querySelector('input[name="bmi"]:checked').value;
  diabetes = document.querySelector('input[name="diabetes"]:checked').value;
  diet = document.querySelector('input[name="diet"]:checked').value;
  age = parseInt(age);
  bmi = parseInt(bmi);
  diabetes = parseInt(diabetes);
  diet = parseInt(diet);
  total = age + bmi + diabetes + diet;
  return total;

};


function calculateAndPrintRisk() {
  var riskTotal = calculateRisk();
  var message;
  var panel = document.getElementById("messagePanel");


    if (total <= 15) {
    var para = document.createElement("p");
    var node = document.createTextNode("This is new.");
    para.appendChild(node);
    var element = document.getElementById("messagePanel");
    element.appendChild(para);


    } else if (total <= 25) {

          alert("medium");

   } else {

         alert("high");
     }

  }

This Div element is hidden, therefore, it would only appear when the message is displayed. The objective of the code, is to: When the calculate button is pressed, the function calculateRisk() will calculate the value of each answer (age, bmi, diabetes, diet), sum them all together, and if the total is <= 15, a message has to be displayed in a box. This box needs to be hidden before the calculate button is pressed and only shown afterwards. When the box is shown, a message inside this box needs to be displayed and needs to stay there until I press calculate again.

#messagePanel{
width:600px;
height:150px;
border:1px solid black;
visibility: hidden;

Any help would be greatly apreciated as Im still a noob with javascript. Thanks

Upvotes: 3

Views: 7835

Answers (3)

GolezTrol
GolezTrol

Reputation: 116110

display: none hides the element and removes it from the flow. Any content inside it will also be invisible. You will need to remove that display: none from the div to make this work.

Optionally you can make the div 0 height, move it out of view, and/or set visibility: hidden, which hides the content, but doesn't remove the element from the flow, allowing parts of the content to be made visible again. When you do those things, you can still position the added paragraph to make it visible.

Upvotes: 0

Rahul Verma
Rahul Verma

Reputation: 398

You can set CSS property for that div using JavaScript, try this

function calculateAndPrintRisk() {
  var riskTotal = calculateRisk();
  var message;
  var panel = document.getElementById("messagePanel");

  // hide this div by default
  panel.style.display = "block";

    if (total <= 15) {

        panel.innerHTML = "<p>Your results show that you currently have a low risk of developing diabetes. However, it is important that youmaintain a healthy lifestyle in terms of diet and exercise.</p>";

        // display the div
        panel.style.display = "block";

    } else if (total <= 25) {

          alert("medium");

   } else {

         alert("high");
     }

  }

Upvotes: 0

Dragomir Kolev
Dragomir Kolev

Reputation: 1108

I think this is what you need:

if (total <= 15) {
    var para = document.createElement("p");
    var node = document.createTextNode("This is new.");
    para.appendChild(node);
    var element = document.getElementById("messagePanel");
    element.appendChild(para);
    }

Taken from: https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_elementcreate

As someone pointed in the comments, you will also need to remove the css class hidden from the messagePanel. You can do that in JavaScript as well.

Upvotes: 3

Related Questions