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

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

• javascript
• css
• html

Share Follow edited Aug 9, 2017 at 10:57 Miguel asked Aug 9, 2017 at 10:17 MiguelMiguel 13144 silver badges1313 bronze badges 8

• There isn't actually a clear question here. Are you asking how to make the div visible? panel.style.display = "block"; should fix that. You can google how to set CSS properties in JS quite easily – ADyson Commented Aug 9, 2017 at 10:19
• it would only appear when you also set display to something other than none. – Jorg Commented Aug 9, 2017 at 10:19
• You should add what is not working with your current solution. I believe your problem is that for now the messagePanel will STILL be hidden when you add the p tag – MisterJ Commented Aug 9, 2017 at 10:19
• Possible duplicate of how to add paragraph on top of div content – Haris Commented Aug 9, 2017 at 10:20
• 1 You're checking total but puting riskTotal – Mihai Pantea Commented Aug 9, 2017 at 10:23

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 3

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./js/tryit.asp?filename=tryjs_dom_elementcreate

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

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");
     }

  }

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.