I am in the process of making a picture framing calculator. The output of this calculator is displayed as the Width and Height on a displayed rectangle. The problem I'm running into is that there's a second rectangle which needs to display identical Width and Height when the calculator delivers its output. Here's an example using the following user input:
- Frame Width: 16
- Frame Height: 20
- Picture Width: 11
- Picture Height: 17
- Mat Overlap: 1
#height {
text-align: left;
margin-top: 250px;
margin-left: 4px;
}<!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">
</head>
<body>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<script>
//Get the button
var mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<section>
<form id="frm1" action="index.html" onreset="resetOutput()" method="post">
<fieldset>
<legend>
I Was Framed Calculator
</legend>
<label for="frameWidth">Frame Width:</label><input type="number" title="numbers should be in inches" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57"
step="any" min="0" name="frameWidth" id="frameWidth">
<select name="frameWidthFraction" id="frameWidthFraction">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select>
<label for="frameHeight">Frame Height:</label><input type="number" title="numbers should be in inches" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57"
step="any" min="0" name="frameHeight" id="frameHeight">
<select name="frameHeightFraction" id="frameHeightFraction">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select>
<label for="pictureWidth">Picture Width:</label><input type="number" title="numbers should be in inches" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57"
step="any" min="0" name="pictureWidth" id="pictureWidth">
<select name="pictureWidthFraction" id="pictureWidthFraction">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select>
<label for="pictureHeight">Picture Height:</label><input type="number" title="numbers should be in inches" onkeypress="return (event.which == 8 || event.which == 0 || event.which == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any"
min="0" name="pictureHeight" id="pictureHeight">
<select name="pictureHeightFraction" id="pictureHeightFraction">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select><br>
<label for="matOverlap">Mat Overlap:</label><input type="number" title="numbers should be in inches" onkeypress="(event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any"
min="0" name="matOverlap" id="matOverlap">
<select name="matOverlapFraction" id="matOverlapFraction">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select>
<br>
<br>
<br>
<input type="reset" value="Reset">
<input type="button" onclick="calc()" value="Calculate" name="cmdCalc" />
</fieldset>
</form>
</section>
<script src="https://iwasframed.com/calculator/fraction.js/index.js"></script>
<script>
function calc()
{
var frameWidth = document.getElementById('frameWidth').value
frameWidth = parseInt(frameWidth)
var frameWidthFraction = document.getElementById('frameWidthFraction').value
frameWidthFraction = parseFloat(frameWidthFraction)
var frameHeight = document.getElementById('frameHeight').value
frameHeight = parseInt(frameHeight)
var frameHeightFraction = document.getElementById('frameHeightFraction').value
frameHeightFraction = parseFloat(frameHeightFraction)
var pictureWidth = document.getElementById('pictureWidth').value
pictureWidth = parseInt(pictureWidth)
var pictureWidthFraction = document.getElementById('pictureWidthFraction').value
pictureWidthFraction = parseFloat(pictureWidthFraction)
var pictureHeight = document.getElementById('pictureHeight').value
pictureHeight = parseInt(pictureHeight)
var pictureHeightFraction = document.getElementById('pictureHeightFraction').value
pictureHeightFraction = parseFloat(pictureHeightFraction)
var matOverlap = document.getElementById('matOverlap').value
matOverlap = parseInt(matOverlap)
var matOverlapFraction = document.getElementById('matOverlapFraction').value
matOverlapFraction = parseFloat(matOverlapFraction)
if (isNaN(frameWidth) || isNaN(frameHeight) || isNaN(pictureWidth) || isNaN(pictureHeight) || isNaN(matOverlap)) {
alert('All fields are required!')
return
}
var width = (1 / 2) * ((frameHeight frameHeightFraction) - (pictureHeight pictureHeightFraction) (matOverlap matOverlapFraction));
var height = (1 / 2) * ((frameWidth frameWidthFraction) - (pictureWidth pictureWidthFraction) (matOverlap matOverlapFraction));
document.getElementById('width').innerHTML = new Fraction(width).toString() '"';
document.getElementById('height').innerHTML = new Fraction(height).toString() '"';
document.getElementById('rectangle').scrollIntoView({
behavior: 'smooth'
})
}
function resetOutput() {
document.getElementById('width').innerHTML = ""
document.getElementById('height').innerHTML = ""
}
</script>
<div style="margin:0 auto;text-align:center;width:400px;height:50px;border:5px solid #000; margin-top: 20px; margin-bottom: 50px;padding-bottom:75%;background-color:gray" id="rectangle">
<center>
<div id="width"></div>
</center>
<div id="height"></div>
</div>
<p>
<div style="margin:0 auto;text-align:center;width:400px;height:50px;border:5px solid #000; margin-top: 20px; margin-bottom: 50px;padding-bottom:75%;background-color:gray" id="rectangle">
<center>
<div id="width"></div>
</center>
<div id="height"></div>
</div>
</body>
</html>As you can see from code snippet above - the first rectangle correctly displays the output, but the second rectangle does not.
Can someone please provide guidance on how to get the second (bottom) rectangle to display the identical output as the first first (top) rectangle?
What I've done is simply use this particular piece of code twice:
<div style="margin:0 auto;text-align:center;width:400px;height:50px;border:5px solid #000; margin-top: 20px; margin-bottom: 50px;padding-bottom:75%;background-color:gray" id="rectangle">
<center>
<div id="width"></div>
</center>
<div id="height"></div>
</div>
CodePudding user response：
<div style="margin:0 auto;text-align:center;width:400px;height:50px;border:5px solid #000; margin-top: 20px; margin-bottom: 50px;padding-bottom:75%;background-color:gray" id="rectangle">
<center>
<div id="width"></div>
</center>
<div id="height"></div>
</div>
You have given same id 2 times in your code. You can't have same id in multiple html elements since id must be unique. You can either add class or add different id to the second div. I have added different id to both the div as width-1 and height-1 you can check it below:
#height {
text-align: left;
margin-top: 250px;
margin-left: 4px;
}<!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">
</head>
<body>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<script>
//Get the button
var mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {
scrollFunction()
};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<section>
<form id="frm1" action="index.html" onreset="resetOutput()" method="post">
<fieldset>
<legend>
I Was Framed Calculator
</legend>
<label for="frameWidth">Frame Width:</label><input type="number" title="numbers should be in inches" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57"
step="any" min="0" name="frameWidth" id="frameWidth">
<select name="frameWidthFraction" id="frameWidthFraction">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select>
<label for="frameHeight">Frame Height:</label><input type="number" title="numbers should be in inches" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57"
step="any" min="0" name="frameHeight" id="frameHeight">
<select name="frameHeightFraction" id="frameHeightFraction">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select>
<label for="pictureWidth">Picture Width:</label><input type="number" title="numbers should be in inches" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57"
step="any" min="0" name="pictureWidth" id="pictureWidth">
<select name="pictureWidthFraction" id="pictureWidthFraction">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select>
<label for="pictureHeight">Picture Height:</label><input type="number" title="numbers should be in inches" onkeypress="return (event.which == 8 || event.which == 0 || event.which == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any"
min="0" name="pictureHeight" id="pictureHeight">
<select name="pictureHeightFraction" id="pictureHeightFraction">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select><br>
<label for="matOverlap">Mat Overlap:</label><input type="number" title="numbers should be in inches" onkeypress="(event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" step="any"
min="0" name="matOverlap" id="matOverlap">
<select name="matOverlapFraction" id="matOverlapFraction">
<option value="0">0</option>
<option value="0.0625">1/16</option>
<option value="0.0125">1/8</option>
<option value="0.1875">3/16</option>
<option value="0.25">1/4</option>
<option value="0.3125">5/16</option>
<option value="0.375">3/8</option>
<option value="0.4375">7/16</option>
<option value="0.50">1/2</option>
<option value="0.5625">9/16</option>
<option value="0.625">5/8</option>
<option value="0.6875">11/16</option>
<option value="0.75">3/4</option>
<option value="0.8125">3/16</option>
<option value="0.875">7/8</option>
<option value="0.9375">15/16</option>
</select>
<br>
<br>
<br>
<input type="reset" value="Reset">
<input type="button" onclick="calc()" value="Calculate" name="cmdCalc" />
</fieldset>
</form>
</section>
<script src="https://iwasframed.com/calculator/fraction.js/index.js"></script>
<script>
function calc()
{
var frameWidth = document.getElementById('frameWidth').value
frameWidth = parseInt(frameWidth)
var frameWidthFraction = document.getElementById('frameWidthFraction').value
frameWidthFraction = parseFloat(frameWidthFraction)
var frameHeight = document.getElementById('frameHeight').value
frameHeight = parseInt(frameHeight)
var frameHeightFraction = document.getElementById('frameHeightFraction').value
frameHeightFraction = parseFloat(frameHeightFraction)
var pictureWidth = document.getElementById('pictureWidth').value
pictureWidth = parseInt(pictureWidth)
var pictureWidthFraction = document.getElementById('pictureWidthFraction').value
pictureWidthFraction = parseFloat(pictureWidthFraction)
var pictureHeight = document.getElementById('pictureHeight').value
pictureHeight = parseInt(pictureHeight)
var pictureHeightFraction = document.getElementById('pictureHeightFraction').value
pictureHeightFraction = parseFloat(pictureHeightFraction)
var matOverlap = document.getElementById('matOverlap').value
matOverlap = parseInt(matOverlap)
var matOverlapFraction = document.getElementById('matOverlapFraction').value
matOverlapFraction = parseFloat(matOverlapFraction)
if (isNaN(frameWidth) || isNaN(frameHeight) || isNaN(pictureWidth) || isNaN(pictureHeight) || isNaN(matOverlap)) {
alert('All fields are required!')
return
}
var width = (1 / 2) * ((frameHeight frameHeightFraction) - (pictureHeight pictureHeightFraction) (matOverlap matOverlapFraction));
var height = (1 / 2) * ((frameWidth frameWidthFraction) - (pictureWidth pictureWidthFraction) (matOverlap matOverlapFraction));
document.getElementById('width').innerHTML = new Fraction(width).toString() '"';
document.getElementById('height').innerHTML = new Fraction(height).toString() '"';
document.getElementById('width-1').innerHTML = new Fraction(width).toString() '"';
document.getElementById('height-1').innerHTML = new Fraction(height).toString() '"';
document.getElementById('rectangle').scrollIntoView({
behavior: 'smooth'
})
}
function resetOutput() {
document.getElementById('width').innerHTML = ""
document.getElementById('height').innerHTML = ""
document.getElementById('width-1').innerHTML = ""
document.getElementById('height-1').innerHTML = ""
}
</script>
<div style="margin:0 auto;text-align:center;width:400px;height:50px;border:5px solid #000; margin-top: 20px; margin-bottom: 50px;padding-bottom:75%;background-color:gray" id="rectangle">
<center>
<div id="width"></div>
</center>
<div id="height"></div>
</div>
<p>
<div style="margin:0 auto;text-align:center;width:400px;height:50px;border:5px solid #000; margin-top: 20px; margin-bottom: 50px;padding-bottom:75%;background-color:gray" id="rectangle">
<center>
<div id="width-1"></div>
</center>
<div id="height-1"></div>
</div>
</body>
</html>