Question

我有以下3个输入：长度，宽度，高度。使用javascript，我需要计算一个立方体的面积，但是在此之前，当我按下“ CALCULEAZA”按钮时，我无法获得任何功能。如何使“ calculeaza”功能正常工作？

     <div class="col-sm-4">
        <div class="row">
         <h3>Calculator de Folie</h3>
           <form>
            Lungime:<br>
            <input type="text" name="firstname" id="lungime"><br>
            Latime:<br>
            <input type="text" name="lastname" id="latime"><br>
            Inaltime:<br>
            <input type="text" name="lastname" id="inaltime"><br>
            <button id="submit" onclick="calculeaza()" style="margin-   top:5%;">CALCULEAZA</button>
          </form>
        </div>
        <div class="row container fluid">
            <h1 id="value-zone"><span id="value">100</span>m2</h1>
        </div> 
    </div>
    <div class="col-sm-4">
  <h3>Seminte Demetra CR</h3>        
    </div>
  </div>
</div>
<script>
$(document).ready(function() {
    document.getElementById('value-zone').hidden = true;
});

function calculeaza(){
    var x = parseFloat(document.getElementById('lungime').value);
    var y = x/2;
    console.log("aaaaaa");
    document.getElementById('value-zone').hidden = false;
}
</script>

我也知道在同一文件中使用脚本不是可以的，但是在我了解了它的工作原理之后，我将对其进行修改。这是我做的第一件事。预先谢谢你！

Answer 1

使用e.preventDefault()不会在单击提交按钮时重定向。否则，代码将无法正常运行。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-4">
        <div class="row">
         <h3>Calculator de Folie</h3>
           <form>
            Lungime:<br>
            <input type="text" name="firstname" id="lungime"><br>
            Latime:<br>
            <input type="text" name="lastname" id="latime"><br>
            Inaltime:<br>
            <input type="text" name="lastname" id="inaltime"><br>
            <button id="submit" onclick="calculeaza()" style="margin-   top:5%;">CALCULEAZA</button>
          </form>
        </div>
        <div class="row container fluid">
            <h1 id="value-zone"><span id="value">100</span>m2</h1>
        </div> 
    </div>
    <div class="col-sm-4">
  <h3>Seminte Demetra CR</h3>        
    </div>
  </div>
</div>
<script>
$(document).ready(function() {
    document.getElementById('value-zone').hidden = true;
});

function calculeaza(){
    var x = parseFloat(document.getElementById('lungime').value);
    var y = x/2;
    console.log("aaaaaa");
    document.getElementById('value-zone').hidden = false;
}
$("#submit").click((e)=>{e.preventDefault()})
</script>

Answer 2

将按钮更改为：

<button id="submit" type="button" onclick="calculeaza()" style="margin-最高：5％；“> CALCULEAZA

默认情况下，按钮的类型为SUBMIT，它将提交表单。您可以使用javascript禁用此功能，也可以对按钮进行较小的改动。

Answer 3

也许是这样的：

<div class="col-sm-4">
    <div class="row">
        <h3>Calculator de Folie</h3>
        <div class="form-group">
          <label class="col-form-label" for="length">length</label>
          <input type="number" class="form-control" id="length">
        </div>
        <div class="form-group">
          <label class="col-form-label" for="width">width</label>
          <input type="number" class="form-control" id="width">
        </div>
        <div class="form-group">
          <label class="col-form-label" for="height">height</label>
          <input type="number" class="form-control" id="height">
        </div>
        <button onclick="calculeaza()" style="margin-top:5%;">CALCULEAZA</button>
    </div>
    <div class="row container fluid">
        <h1 id="value-zone"><span id="value">100</span>m2</h1>
    </div>
</div>
<script>
    document.getElementById('value-zone').hidden = true;

    // calculates the surface area of a cuboid and updates #value with the answer
    function calculeaza() {
        var l = parseFloat(document.getElementById('length').value);
        var w = parseFloat(document.getElementById('width').value);
        var h = parseFloat(document.getElementById('height').value);

        if (!isNaN(l) && !isNaN(w) && !isNaN(h)) {
          document.getElementById('value-zone').hidden = false;
          document.getElementById('value').innerHTML = 2*(l*w + w*h + l*h);
        }

    }
</script>

删除了<form>，而使用了引导程序的“ form-groups”。不需要jquery，因为似乎您仍然使用document.getElementById。

如何使用JavaScript计算表面积？

3 个答案: