Reputation: 131
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
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
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
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