Write HTML and JavaScript code to gather the length and width of a rectangle fro
ID: 3817112 • Letter: W
Question
Write HTML and JavaScript code to gather the length and width of a rectangle from the user and compute the area. Use two text boxes for the user to enter the length and width. Have a button use the onclick attribute to call a function that gathers the length and width, computes the area, and writes the result to a h2 element. Put all the HTML and JavaScript code inside the following HTML code.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Welcome Message</title>
<meta name="description" content="This web page computes the area of a rectangle" />
<meta name="keywords" content="JavaScript, textbox, button, function" />
<meta name="author" content="cs2350 student" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
</body>
</html>
Explanation / Answer
<html>
<head> </head>
<title>Welcome Message</title>
<script type="text/javascript">
function myfunction() {
var first = document.getElementById("textbox1").value;
var second = document.getElementById("textbox2").value;
var answer =parseFloat(first)*parseFloat(second);
var str = "LENGTH OF RECTANGLE IS";
var result = str.fontcolor("#45AA63");
document.getElementById("demo").innerHTML = result;
var str2 = "WIGH OF RECTANGLE IS";
var result = str2.fontcolor("#45AA63");
document.getElementById("demo1").innerHTML = result;
var str3 = "THE AREA OF RECTANGLE IS:";
var result = str3.fontcolor("#45AA63");
document.getElementById("demo2").innerHTML = result;
var textbox4 = document.getElementById('textbox4');
textbox4.value=first;
var textbox5 = document.getElementById('textbox5');
textbox5.value=second;
var textbox3 = document.getElementById('textbox3');
textbox3.value=answer;
}
</script>
<body><center>ENTER LENGTH OF RECTANGLE:
<input type="text" name="textbox1" id="textbox1" /><BR><BR>
<br>ENTER WIGH OF RECTANGLE:
<input type="text" name="textbox2" id="textbox2" /> <br><BR><BR>
<input type="submit" name="button" id1="button1" value="SUBMIT" />
<p id="demo"></p>
<input type="text" name="textbox4" id="textbox4" readonly="true"/><p id="demo1"></p>
<input type="text" name="textbox5" id="textbox5" readonly="true"/><p id="demo2"></p>
<input type="text" name="textbox3" id="textbox3" readonly="true"/><p id="demo">
</center>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.