如何获得一个基于用户输入的数字，以显示在页面底部的html文本中？
如何获得一个基于用户输入的数字，以显示在页面底部的html文本中？
提问于 2022-10-12 13:17:52
该甜甜圈图有一个绿色部分，称为集团有限公司计划，但这是一个完整的计算年。我想显示每月集团有限公司的计划，这将是绿色集团有限公司号码从甜甜圈图表除以12。我有困难的数字打印在哪里，我写的“每月集团有限公司计划：”号码没有出现。我尝试过使用document.write和.innerhtml，这是我目前在代码中所拥有的。如果有人能帮我看看我做错了什么，那就太好了，谢谢！
function hpmpGraph() {
var hp = document.hpmpForm.HP.value,
np = hp * .6,
cp = hp - np,
rp = hp / 12,
mp = document.hpmpForm.MP.value,
ap = +mp + +cp,
ctx = document.getElementById('hpmpratio').getContext('2d');
var data = {
labels: ["Income at Risk", "Group LTD Plan"],
datasets: [{
data: [ap, np],
backgroundColor: ["#D9221C", "#17DB4E"],
hoverBackgroundColor: ["#D9221C", "#17DB4E"]
}]
};
var options = {
cutoutPercentage: 65
};
var myChart = new Chart(ctx, {
type: 'doughnut',
data: data,
options: options
});
}
function myFunction() {
var number = 12;
document.getElementById("myText").innerHTML = number;
}<html>
<head>
<title> How much of your income is at risk?
</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<style>
input[type='text'] {
font-size: 14px;
}
</style>
</head>
<body onload="hpmpGraph()" onload="myFunction()" style="background-color:F3FBFF;text-align:center">
<h1 style="text-align:center">
<font face="Verdana" color="2D4C5E" size="9">How much of your income is at risk?</font><br />
</h1>
<form name="hpmpForm" method="post">
Salary :
<input type="text" name="HP" value="180000">
<br> Bonus & Commision :
<input type="text" name="MP" value="50000">
<br>
<button type="button" onclick="hpmpGraph();">Calculate</button>
<h3>Results</h3>
<canvas id="hpmpratio" height="85"></canvas>
</form>
<p>
<font color="#17DB4E">Monthly Group LTD Plan: <span id="myText"></span> </p>
<p>
<font color="#D9221C">Unprotected Monthly Income:</p>
</body>
</html>
回答 1
Stack Overflow用户
发布于 2022-10-12 13:25:09
你只能在身体上有一个装载功能。除了代码之外，您还可以在hpmpGraph()函数中运行myfunction()，如下所示：
<html>
<head>
<title> How much of your income is at risk?
</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<style>
input[type='text'] { font-size: 14px; }
</style>
</head>
<body onload="hpmpGraph()" style="background-color:F3FBFF;text-align:center">
<script>
function hpmpGraph() {
var hp = document.hpmpForm.HP.value,
np = hp * .6,
cp = hp - np,
rp = hp/12,
mp = document.hpmpForm.MP.value,
ap = +mp + +cp,
ctx = document.getElementById('hpmpratio').getContext('2d');
var data = {
labels: ["Income at Risk","Group LTD Plan"],
datasets:
[{
data: [ap,np],
backgroundColor: ["#D9221C","#17DB4E"],
hoverBackgroundColor: ["#D9221C","#17DB4E"]
}]
};
var options = {cutoutPercentage: 65};
var myChart = new Chart(ctx, {
type: 'doughnut',
data: data,
options: options
});
myFunction()
}
function myFunction() {
var number = 12;
document.getElementById("myText").innerHTML = number;
document.getElementById("mIncome").innerHTML = "$100000";
}
</script>
<h1 style="text-align:center"><font face = "Verdana" color = "2D4C5E" size = "9">How much of your income is at risk?</font><br />
</h1>
<form name="hpmpForm" method="post">
Salary :
<input type="text" name="HP" value="180000">
<br>
Bonus & Commision :
<input type="text" name="MP" value="50000">
<br>
<button type="button" onclick="hpmpGraph();">Calculate</button>
<h3>Results</h3>
<canvas id="hpmpratio" height="85"></canvas>
</form>
<p> <font color = "#17DB4E" >Monthly Group LTD Plan: <span id="myText"></span> </p>
<p> <font color = "#D9221C">Unprotected Monthly Income: <span id="mIncome"></span></p>
</body>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74042516
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号