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

【问题标题】：Adding a <p> element inside a DIV with javascript使用 javascript 在 DIV 中添加 <p> 元素
【发布时间】：2017-08-09 10:17:00
【问题描述】：

我需要使用 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() 将计算每个答案的值（年龄、体重指数、糖尿病、饮食），并将它们加在一起，如果总数

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

任何帮助都将不胜感激，因为我仍然是 javascript 的菜鸟。谢谢

【问题讨论】：

这里实际上没有一个明确的问题。您是在问如何使 div 可见吗？ panel.style.display = "block"; 应该解决这个问题。你可以google一下如何很容易地在JS中设置CSS属性
只有当您将display 设置为none 以外的其他值时才会出现。
您应该添加不适用于当前解决方案的内容。我相信你的问题是，当你添加 p 标签时，messagePanel 仍然会被隐藏
how to add paragraph on top of div content的可能重复
您正在检查 total 但正在计算 riskTotal

标签： javascript css html

【解决方案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

正如有人在 cmets 中指出的那样，您还需要从 messagePanel 中删除隐藏的 css 类。你也可以在 JavaScript 中做到这一点。

【讨论】：

这非常接近我的需要。但由于某种原因，显示“这是新的”消息并在之后立即被删除。我需要它留在那里，直到再次按下“计算”按钮。我将更新我的帖子以显示完整的代码
是的，请这样做。
我猜是因为表单提交。也许尝试这样的事情：stackoverflow.com/questions/21263414/…

【解决方案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");
     }

  }

【讨论】：

【解决方案3】：

display: none 隐藏元素并将其从流中移除。它里面的任何内容也将是不可见的。您将需要从 div 中删除 display: none 才能使其正常工作。

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

【讨论】：