Here is my code –
Inputting the following metrics:
Frame Width: 16
Frame Height: 20
Picture Width: 11
Picture Height: 17
Mat Overlap: .25
…produces the following output: 1.6252.625 due to not writing HTML after the calculation is made, thus should be:
Width = 1.625
Height = 2.625
{
margin:0;
padding: 0;
font-family: 'Lato', sans-serif;
}
/*Fieldset and legend */
fieldset {
margin: 2em 0;
padding: 1em 2em;
border: solid 1px #ccc;
border-radius: 6px;
min-width:P 200px;
}
legend {
font-size: 1.25em;
padding: 0 .25em;
color: #999;
}
/* Labels */
label{
display: block;
margin-top: 1em;
}
.checks label {
margin-top: 0;
}
label:first-of-type {
margin-top: 0;
}
/* Inputs and textarea */
input {
padding: .5em;
border: solid 1px #999;
background-color: #D3D3D3
}
input[type="number"], input[type="text"] {
width: 15em;
background-color: #D3D3D3
}
textarea {
min-height: 8em;
min-width: 100%;
padding: .5em;
border: solid 1px #999;
background-color: #D3D3D3
}
/* radio buttons and checkboxes */
.checks {
margin-bottom: 1em;
}
.checks p {
margin-bottom: 0;
}
input[type="checkbox"] + label, input[type="radio"] + label
{
display: inline-block;
padding-top: 0;
margin-top: 0;
}
input[type="radio"] {
margin-left: 1.5em;
margin-right: 0;
}
input[type="radio"]:first-of-type {
margin-left: 0;
}
#dvemail {
display: none;
}
#chkYes:checked ~ #dvemail {
display: block;
}
/* Submit Button */
input[type="button"] {
padding: .5em 1em;
border-radius: 6px;
background-color: #333;
color: #fff;
font-family: 'Lato', sans-serif;
font-size: .8em;
}
/* Large screen rules */
@media screen and (min-width: 430px) {
legend {
font-size: 1.75em;
}
fieldset {
width: 40%;
min-width: 320px;
margin: auto;
}
.checks label {
display: inline-block;
padding-top: .5em;
margin-top: 0;
margin-right: .5em;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name "viewport" content="width=device-width,
initial-scale=1.0">
<title>I Was Framed - Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<form id="frm1" action="form_action.asp">
<fieldset>
<legend>
I Was Framed Calculator
</legend>
<label for="frameWidth">Frame Width:</label><input type="number" step="any" min="0" name="wf" id="wf">
<label for="frameHeight">Frame Height:</label><input type="number" step="any" min="0" name="hf" id="hf"><br>
<label for="pictureWidth">Picture Width:</label><input type="number" step="any" min="0" name="wp" id="wp">
<label for="pictureHeight">Picture Height:</label><input type="number" step="any" min="0" name="hp" id="hp"><br>
<label for="matOverlap">Mat Overlap:</label><input type="number" min="0" step="any" name="o" id="o"><br>
<div class="checks">
<br>
Email results?   
<input type="radio" id="chkYes" name="chk" />
<label for="chkYes">Yes</label>
<input type="radio" id="chkNo" name="chk" />
<label for="chkNo">No</label>
<div id="dvemail">
<br>
Email:
<input type="email" id="email" /><br>
<label for="msg">Note:</label>
<textarea name="msg" id="msg"></textarea>
</div>
</div>
<input type="button" onclick="calc()" value="Calculate"/>
</fieldset>
</form>
</section>
<script>
function calc()
{
var wf = document.getElementById('wf').value
var hf = document.getElementById('hf').value
var wp = document.getElementById('wp').value
var hp = document.getElementById('hp').value
var o = document.getElementById('o').value
Width: document.write((1/2)*(hf-hp+o));
Height: document.write((1/2)*(wf-wp+o));
}
</script>
</body>
</html>I’m specifically wanting to solve the following two equations based on user input:
Width: document.write((1/2)*(hf-hp+o));
Height: document.write((1/2)*(wf-wp+o));
But I want to avoid using document.write completely because I can’t seem to .write HTML after the calculation to have the output of my calculator look presentable. Respectfully, what should I use instead and how with my code provided?
I have also looked at JavaScript eval() but it asserts –
Do NOT use eval(). due to security issues.