如何显示函数的两个相同输出

Question

我正在制作一个画幅计算器。此计算器的输出在显示的矩形上显示为 Width 和 Height。我运行遇到的问题是，当计算器提供其输出时，还有第二个矩形需要显示相同的 Width 和 Height。下面是一个使用以下用户输入的示例：

帧宽度：16
帧高：20
图片宽度：11
图片高度：17
垫子重叠：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>

正如您从上面的代码片段中看到的那样 - 第一个矩形正确显示了输出，但第二个矩形没有。

有人可以指导如何让 second（底部）矩形显示与第一个 first（顶部）矩形相同的输出吗？

我所做的只是简单地使用这段代码两次：

<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>

Answer 1

<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>

您在代码中输入了 2 次相同的 ID。您不能在多个 html 元素中使用相同的 ID，因为 ID 必须是唯一的。您可以添加 class 或向第二个 div 添加不同的 ID。我已经为 div 添加了不同的 id 作为 width-1 和 height-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('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>

如何显示函数的两个相同输出

How to display two identical outputs of a function

html

javascript

css