JavaScript 没有在 HTML 中显示我想要的东西

我是JS和HTML的新手，我目前正在做一些事情。我得到没有错误的视觉工作室，但我似乎不能找出我错了。我有搜索stackoverflow，似乎找不到适合我的东西。我已经包含了我所有的代码，因为我几乎可以肯定，我已经错过了一些沿行的HTML部分

我想让它根据提交时单选按钮的输出显示指定的大小写，现在我只得到undefined

-谢谢大家的帮助。

<!DOCTYPE html>
<!--HTML5-->
<html>
<!--Headings-->
<head>
<!--Colors-->
<title>Risk State Calculator</title>
<style type="text/css">
#main-header {
text-align: center;
background-color: black;
color: white;
padding: 10px;
}
</style>
<style type="text/css">
#main-article {
text-align: left;
background-color: gray;
color: black;
padding: 10px;
}
</style>
<style type="text/css">
#sub-article {
text-align: left;
background-color: lightslategray;
color: black;
padding: 10px;
}
</style>
</head>
<!--Body-->
<body>
<!--Headings-->
<header id="main-header">
<h1>Risk State Calculator</h1>
</header>
<!--Paragraph-->
<article id="main-article">
<form>
<fieldset>
<dv id="Like">
<legend>
<h4>Likelihood</h4>
</legend>
<input type="radio" name="Likeli" value="0.1" />0.1 <br />
<input type="radio" name="Likeli" value="0.3" />0.3 <br />
<input type="radio" name="Likeli" value="0.5" />0.5 <br />
<input type="radio" name="Likeli" value="0.7" />0.7 <br />
<input type="radio" name="Likeli" value="0.9" />0.9 <br />
</dv>
</fieldset>
<fieldset id="Con">
<dv id="Con">
<legend>
<h4>Consequence</h4>
</legend>
<input type="radio" name="Consq" value="0" />Minimal or no impact <br />
<input type="radio" name="Consq" value="1" />5% and less <br />
<input type="radio" name="Consq" value="2" />5-7% <br />
<input type="radio" name="Consq" value="3" />7-10% <br />
<input type="radio" name="Consq" value="4" />10% and more <br />
</dv>
</fieldset>
<br />
<button type="button" onclick="display()">Submit</button>
</form>
</article>
<article id="sub-article">
<form>
<fieldset>
<legend>
<h4>Risk State</h4>
</legend>
<script type="text/javascript">
function display() {
const Consq = (document.getElementsByName('Consq').checked);
var Likeli = (document.getElementsByName('Likeli').checked);
var Risk;
switch (Consq) {
case 0:
if (Likeli == 0.1)
Risk = "Low.1";
else if (Likeli == 0.3)
Risk = "Low.3";
else if (Likeli == 0.5)
Risk = "Low.5";
else if (Likeli == 0.7)
Risk = "Low.7";
else if (Likeli == 0.9)
Risk = "Medium.9";
break;
case 1:
if (Likeli == 0.1)
Risk = "Low.2";
else if (Likeli == 0.3)
Risk = "Low.6";
else if (Likeli == 0.5)
Risk = "Low1.0";
else if (Likeli == 0.7)
Risk = "Medium1.4";
else if (Likeli == 0.9)
Risk = "Medium.1.8";
break;
case 2:
if (Likeli == 0.1)
Risk = "Low.3";
else if (Likeli == 0.3)
Risk = "Medium.9";
else if (Likeli == 0.5)
Risk = "Medium1.5";
else if (Likeli == 0.7)
Risk = "Medium2.1";
else if (Likeli == 0.9)
Risk = "High2.7";
break;
case 3:
if (Likeli == 0.1)
Risk = "Low.4";
else if (Likeli == 0.3)
Risk = "Medium1.2";
else if (Likeli == 0.5)
Risk = "Medium2.0";
else if (Likeli == 0.7)
Risk = "High2.8";
else if (Likeli == 0.9)
Risk = "High3.6";
break;
case 4:
if (Likeli == 0.1)
Risk = "Low.5";
else if (Likeli == 0.3)
Risk = "Medium1.5";
else if (Likeli == 0.5)
Risk = "High2.5";
else if (Likeli == 0.7)
Risk = "High3.5";
else if (Likeli == 0.9)
Risk = "High4.5";
break;
}
alert(Risk);
}
</script>
</fieldset>
</form>
</article>
</body>
</html>

在您的case结构中，您将LikeLi对象的值与数字进行比较，LikeLi对象保存为单选按钮元素的字符串。因此，没有任何if语句返回True，并且您的Risk对象从未初始化，因此它返回为未定义。对于除type="number"以外的所有输入标签和类型="date"价值=";"总是一个字符串obj。您必须比较字符串或将LikeLi转换为数字。

希望以下内容有所帮助:-

var Consq = Number (document.querySelector('input:checked[name="Consq"]').value;)
var Likeli = Number(document.querySelector('input:checked[name="Likeli"]').value;)

您需要正确选择单选按钮，然后获取它们的值。由于它们是字符串而不是整数，我使用Number()将它们转换为数字。如果您避免转换，那么您的所有案例都不会运行，并且它返回undefined。

相关内容

最新更新

热门标签：