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（）将计算每个答案的值（年龄，bmi，糖尿病，饮食），将它们全部加在一起，如果总数<= 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隐藏元素并将其从流中移除。其中的任何内容也将是不可见的。您需要从div中删除display: none才能使其正常工作。

您可以选择将div 0高度设置为高度，将其移出视图，和/或设置visibility: hidden，这会隐藏内容，但不会从流中删除元素，从而允许部分内容内容再次可见。当你做这些事情时，你仍然可以定位添加的段落以使其可见。

使用javascript在DIV中添加<p>元素

3 个答案: