Итак, я пытался найти метод для отображения результатов вопросника, и я пытался использовать модальный вид, который выглядит лучше, чем просто кнопка оповещения, которая должна отображать другую часть информации, основанную на входах Пользователь в анкете. Я создал несколько функций, которые возвращают значения, которые я хочу отобразить в модальном режиме, но я не знаю, как включить их в модальное содержимое. Я не знаю, возможно ли это, и если нет, то какие еще методы вы бы предложили для отображения информации пользователю?
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
.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;
}
<!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>