添加一個 <p> javascript中的DIV中的元素

Question

我需要使用JavaScript在此元素內添加一條消息。

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

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

  }

該Div元素是隱藏的，因此，僅在顯示消息時才會顯示。 該代碼的目的是：按下計算按鈕時，函數calculateRisk（）將計算每個答案（年齡，體重指數，糖尿病，飲食）的值，將它們總計在一起，如果總數小於等於在圖15中，必須在框中顯示一條消息。 在按下計算按鈕之前，此框需要隱藏，並且僅在之后顯示。 當顯示該框時，該框內的消息需要顯示並且需要停留在該位置，直到我再次按下計算。

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

任何幫助將不勝感激，因為我仍然是JavaScript的新手。 謝謝

Answer 1

我認為這是您需要的：

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

摘自： https : //www.w3schools.com/js/tryit.asp? filename =tryjs_dom_elementcreate

正如有人在評論中指出的那樣，您還需要刪除從messagePanel隱藏的css類。 您也可以在JavaScript中執行此操作。

Answer 2

您可以使用JavaScript為該div設置CSS屬性，請嘗試以下操作

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

  }

Answer 3

display: none隱藏元素並將其從流中刪除。 其中的任何內容也將是不可見的。 您將需要刪除該display: none div中的display: none無法進行。

（可選）您可以將div 0高度設置為高，將其移出視圖，和/或設置visibility: hidden ，它隱藏內容，但不從流中刪除該元素，從而使內容的某些部分再次可見。 當您執行這些操作時，仍可以放置添加的段落以使其可見。