javascript - 求矩形面积和周长的独立函数第二部分
问题描述
因此,感谢Barmar的一位出色的人,我使用用户输入正确地完成了我的代码,而不是我最初的方式,它同时给出了面积和周长的答案。
但有人告诉我把它分成两个功能。本质上,为面积和周长计算创建单独的任务并传递长度和宽度参数。
它完美无缺,我只是不确定如何将这个美妙的功能分成更多......
如果有人有任何建议,下面是我的代码笔和代码。
在 Barmar 的帮助下,我认为我在这方面做得很好,但现在我在午夜之前最后一次受到挑战,要从它们中分离出函数。任何建议或指示都会有所帮助。谢谢你。
代码片段:
function controller() {
var type = document.getElementById("apBox").value;
var length = document.getElementById("lengthBox").value;
var width = document.getElementById("widthBox").value;
var mainSolution = document.getElementById("message");
var answer;
var label;
if (type == "a" || type == "A") {
answer = length * width;
label = 'Area';
} else if (type == "p" || type == "P") {
answer = 2 * length + 2 * width;
label = 'Perimiter';
} else {
mainSolution.innerText = "Invalid. Must Enter 'A' or 'P'";
return;
}
if (length.length > 0 && width.length > 0) {
if (!isNaN(answer)) {
mainSolution.innerHTML = `${label} =  ${answer}`;
}
} else {
mainSolution.innerHTML = "";
}
}
function clearText() {
document.getElementById("message").innerHTML = ("<br>");
document.getElementById("apBox").value = "";
document.getElementById("lengthBox").value = "";
document.getElementById("widthBox").value = "";
}
#main {
background-color: #455A6F;
border-radius: 3px;
padding: 10px;
}
#header {
background-color: #292A2B;
border-radius: 3px;
padding: 10px;
}
body {
text-align: center;
font-family: Montserrat;
color: #fff;
}
a {
color: rgb(27, 157, 218);
}
.btn1,
.btn2 {
background-color: rgba(52, 139, 221, 0.699);
border: #303436;
font-family: Montserrat;
font-size: 12px;
color: #fff;
letter-spacing: 2px;
padding: 5px;
font-size: 16px;
font-weight: bold;
border-radius: 5px;
line-height: 3;
text-decoration: none;
box-shadow: 0 0 4px black;
text-shadow: 0 1px 0 black;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 1em;
margin-right: 1em;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-shadow: 1px;
text-transform: capitalize;
text-align: center;
}
/* This is a custom snippet I made, so the footer always stays at the bottom of the page */
footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 2em;
background-color: transparent;
text-align: center;
border-color: rgb(0, 0, 0);
border-radius: 18px;
padding: 12px;
margin-top: 30em;
margin-bottom: 1em;
}
.description {
font-style: italic;
}
form {
border-radius: 25px;
padding: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="styles.css">
<meta name="description" content="Program 9 Assignment, IS30A, Area of a Rectangle">
<title>Program 9</title>
</head>
<!-- HTML Body -->
<body>
<div id="main">
<div id="header">
<h1>Program 9</h1>
<h5>Area or Perimeter</h5>
<h6>of a Rectangle</h6>
</div>
<!-- Main Form & Inputs For User Interaction -->
<form id="myForm">
<form id="myForm">
<label for="userInput1">Enter A for Area or P for Perimeter:</label><br><br>
<input type="text" id="apBox">
<br><br>
<label for="userInput2">Length:</label><br><br>
<input type="text" id="lengthBox"><br><br>
<label for="userInput3">Width:</label><br><br>
<input type="text" id="widthBox">
</form>
<!-- Empty Field & Message For User Who Interacted as well as Output: -->
<p id="demo">Output: </p>
<p id="message"> <br> </p>
<!-- Buttons For Submit & Clear Fields Above -->
<button class="btn1" type="button" onClick="controller()">Submit</button>
<button class="btn2" type="button" onClick="clearText()">Clear</button>
</div>
<script type="text/javascript" src="controller.js"></script>
</body>
<!-- End HTML -->
</html>
解决方案
使这些成为自己的功能实际上非常简单。您的 javascript 将如下所示:
function controller() {
var type = document.getElementById("apBox").value;
var length = document.getElementById("lengthBox").value;
var width = document.getElementById("widthBox").value;
var mainSolution = document.getElementById("message");
var answer;
var label;
if (type == "a" || type == "A") {
answer = Area(length, width);
label = 'Area';
} else if (type == "p" || type == "P") {
answer = Perimiter(length, width);
label = 'Perimiter';
} else {
mainSolution.innerText = "Invalid. Must Enter 'A' or 'P'";
return;
}
if (length.length > 0 && width.length > 0) {
if (!isNaN(answer)) {
mainSolution.innerHTML = `${label} =  ${answer}`;
}
} else {
mainSolution.innerHTML = "";
}
}
function Perimiter(length, width){
return length * 2 + width * 2
}
function Area(length, width){
return length * width
}
function clearText() {
document.getElementById("message").innerHTML = ("<br>");
document.getElementById("apBox").value = "";
document.getElementById("lengthBox").value = "";
document.getElementById("widthBox").value = "";
}
推荐阅读
- mysql - MYSQL - 外键 varchar 列
- python - Pyspark Groupby 创建列
- javascript - 将数据移动到数组内的对象
- mysql - 带有html的列上的MySql正则表达式
- macos - 重新加载新数据/MacOS 时将滚动 SwiftUI 列表重置为顶部
- google-apps-script - 有没有办法使用应用程序脚本安排对离线 Google 表格文档的更新?
- python - 下面的代码在保存功能中有全局关键字,没有这个词程序将无法工作,有人可以解释为什么吗?
- powershell - datetimepicker 事件错误事件处理
- java - Java 如何将 groupingSize() 与 NumberFormat 一起使用
- c# - 电子邮件无法通过 Microsoft Graph