因此，我一直试图找到一种方法来显示问卷的结果，并且我尝试使用一种模态，而不是仅仅使用一个警告按钮，它应该根据输入的内容显示不同的信息。问卷中的用户。我创建了一些函数，这些函数返回要在模式中显示的值，但是我不知道如何将它们合并到模式内容中。我不知道这是否可行，如果不可行，您建议采用什么其他方法向用户显示信息？
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>Endometrial Cancer Predictor </h1>
<h3>What is your BMI?</h3>
<input id="bmi1" type="radio" name="grp1" value="0">
less than 25 </input> <br>
<input id="bmi2" type="radio" name="grp1" value="1.85">
25 to 29 </input> <br>
<input id="bmi3" type="radio" name="grp1" value="4.675">
30 to 39 </input> <br>
<input id="bmi4" type="radio" name="grp1" value="6.175">
over 40 </input>
<h3>Do you take contraception?</h3>
<input id="contraNo" type="radio" name="grp2" value="0">
No <br>
<input id="contraOral" type="radio" name="grp2" value="-0.8">
Oral Contraception <br>
<input id="contraIud" type="radio" name="grp2" value="-1.2">
Intrauterine Device (IUD)
<h3>Do you take HRT?</h3>
<input id="hrtNo" type="radio" name="grp3" value="0">
No <br>
<input id="hrtConti" type="radio" name="grp3" value="-0.675">
Continous <br>
<input id="hrtNon" type="radio" name="grp3" value="0.5">
Non Continous
<h3>Do you suffer from Type 2 Diabetes?</h3>
<input id="diabYes" type="radio" name="grp4" value="1.375">
Yes <br>
<input id="diabNo" type="radio" name="grp4" value="0">
No
<h3>Do you suffer from PCOS?</h3>
<input id="pcosYes" type="radio" name="grp5" value="3.75">
Yes <br>
<input id="pcosNo" type="radio" name="grp5" value="0">
No
<h3>What is your parity?</h3>
<input id="nulliparity" type="radio" name="grp6" value="1.075">
0 <br>
<input id="parOver1" type="radio" name="grp6" value="-0.8">
+1
<br>
<br>
<button id="btn1" onclick="displayResult()">Submit </button>
<div class="bg-modal">
<div class="modal-content">
<div class="close">+</div>
<script src="index.js"></script>
</body>
</html>
(index.css)
.bg-modal{
width: 500px;
height: 300px;
background-color: rgba(0, 0, 0, 0.3);
position: absolute;
top: 250px;
right: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
display: none;
}
.modal-content{
width: 500px;
height: 300px;
background-color: skyblue;
border-radius: 10px;
text-align: center;
padding: 20px;
position: relative;
}
.close{
position: absolute;
top: 0;
right: 14px;
font-size: 38px;
transform: rotate(45deg);
cursor: pointer;
}
(index.js)
function fn1()
{
var score=2.5;
var bmi1 = document.getElementById("bmi1");
var bmi2 = document.getElementById("bmi2");
var bmi3 = document.getElementById("bmi3");
var contraNo = document.getElementById("contraNo");
var contraOral = document.getElementById("contraOral");
var contraIud = document.getElementById("contraIud");
var hrtNo = document.getElementById("hrtNo");
var hrtConti = document.getElementById("hrtConti");
var hrtNon = document.getElementById("hrtNon");
var diabYes = document.getElementById("diabYes");
var diabNo = document.getElementById("diabNo");
var pcosYes = document.getElementById("pcosYes");
var pcosNo = document.getElementById("pcosNo");
var nulliparity = document.getElementById("nulliparity");
var parOver1 = document.getElementById("parOver1");
if(bmi1.checked==true)
score=score+0;
else if(bmi2.checked==true)
score=score+1.85;
else if(bmi3.checked==true)
score=score+4.675;
else if(bmi4.checked==true)
score=score+6.175;
if(contraNo.checked==true)
score=score+0;
else if(contraOral.checked==true)
score=score-0.8;
else if(contraIud.checked==true)
score=score-1.2;
if(hrtNo.checked==true)
score=score+0;
else if(hrtConti.checked==true)
score=score-0.675;
else if(hrtNon.checked==true)
score=score+0.5;
if(diabYes.checked==true)
score=score+1.375;
else if(diabNo.checked==true)
score=score+0;
if(pcosYes.checked==true)
score=score+3.75;
else if(pcosNo.checked==true)
score=score+0;
if(nulliparity.checked==true)
score=score+1.075;
else if(parOver1.checked==true)
score=score-0.8;
var percentage = Math.round((score *100) /100);
return score;
}
function category()
{
var result1= fn1();
let category;
if (result1>=1 && result1<=3.5)
category= "low";
//alert("Your risk category is low ");
else if (result1>3.5 && result1<=6.5)
// alert("Your risk category is medium ");
category= "medium";
else if (result1>6.5)
category= "high";
// alert("Your risk category is medium ");
return category;
}
/* function displayResult() {
let category1 = category();
var result = fn1();
alert(result);
alert(category1);
return false;
}*/
document.getElementById("btn1").addEventListener("click",
function()
{
document.querySelector(".bg-modal").style.display = 'flex';
});
document.querySelector('.close').addEventListener('click',
function()
{
document.querySelector(".bg-modal").style.display = 'none';
});
//incorporate the functions fn1() and category() in the modal
这不是很漂亮，但这向您展示了如何从函数中获取值并将其显示在模式中。