HTML javascript functions

本文关键字：functions javascript HTML 更新时间：2023-09-26

我创建了一个html文件，其中包含一个接受用户输入并进行一些操作的javascript函数。当用户从下拉列表中选择形状，从单选按钮中选择面积或周长时，面积或周长将根据选择进行计算。当用户从下拉列表中选择矩形时，Side2 for rectangle必须处于活动状态
我对functions有问题。我读了很多关于这个话题的消息来源，但我不明白我该怎么做。我不知道我该如何从用户那里获取信息，以及如何处理它们
请帮帮我。。！

    <html>
        <head>
            <meta charset = "utf-8">
            <title>ShapeCalculator</title>
        </head>
        <body>
        <div>
            <p>Shape:
            <select id = "geometric" onchange = "compute()"> 
                <option value = "square">Square</option>
                <option value = "circle">Circle</option>
                <option value = "rectangle">Rectangle</option>
                <option value = "equilateraltriangle">Equilateral Triangle</option>
            </select>
            </p>
            <br><br><br>
        </div>
        <div class = "duzen">
            <form id = "radBut">
                    <input type = "radio" id = "s1" value = "perimeter">Perimeter<br>
                    <input type = "radio" id = "s1" value = "area">Area<br>
            </form>
            <br><br>
        </div>
        <div class = "duzen1">
                <form>
                    <label>Side/Radius:</label><input type = "text" id = "length1"><br>
                    <label>Side2 for Rectangle:</label><input type = "text" id = "length2"><br>
                </form>
        </div>
        <div class = "duzen2">
            <form>
                <input type="button" id = "Calculate" value = "Calculate">
                <input type="submit" id = "Reset" value = "Reset">
            </form>
        </div>
        <div class = "duzen1">
                <form>
                    <label>Result is:</label><input type = "text" id  = "length3"><br>
                </form>
        </div>
    </body>
</html>

我的问题是，只是问你一点帮助，只是给我一个方法，我该怎么做？我如何显示我的错误，或者我的错误在哪里？我改进了我的功能，但代码没有给出结果。编辑后的版本=>

   <script>         
            document.getElementById('Calculate').onclick = compute;
            document.getElementById('length2').disabled=true;
            function compute(){
                var elem1 = document.getElementById('geometric').value;
                var elem2 = document.getElementById('s1');
                var x = document.getElementById('length1').value;
                var y = document.getElementById('length2').value;
                var num1 = parseFloat(x);
                var num2 = parseFloat(y);
                var num3;
                if(elem1 == 'square'){
                    document.getElementById('length2').disabled=true;
                    if(elem2[0].checked){
                        num3 = 2*(num1 + num1);
                        document.getElementById('length3').value = num3;
                    }else if(elem2[1].checked){
                        num3 = num1 * num1;
                        document.getElementById('length3').value = num3;
                    }
                }else if(elem1 == 'circle'){
                    document.getElementById('length2').disabled=true;
                    if(elem2[0].checked){
                        num3 = 2 * Math.PI * num1;
                        document.getElementById('length3').value = num3;
                    }else if(elem2[1].checked){
                        num3 = Math.PI * num1 * num1;
                        document.getElementById('length3').value = num3;
                    }
                }else if(elem1 == 'rectangle'){
                    document.getElementById('length2').disabled=false;
                    if(elem2[0].checked){
                        num3 = 2*(num1 + num2);
                        document.getElementById('length3').value = num3;
                    }else if(elem2[1].checked){
                        num3 = num1 * num2;
                        document.getElementById('length3').value = num3;
                    }
                }else if(elem1 == 'equilateraltriangle'){
                    document.getElementById('length2').disabled=true;
                    if(elem2[0].checked){
                        num3 = 3*(num1);
                        document.getElementById('length3').value = num3;
                    }else if(elem2[1].checked){
                        num3 = (num1 * num1 * Math.sqrt(3)) / 4;
                        document.getElementById('length3').value = num3;
                    }
                }
            }
        </script>

如果我正确回答了你的问题。。。。。您所期望的代码会使side2对于除矩形以外的所有选项都处于禁用状态
不要查看我上传的所有代码。。。。检查两件事
1.我为side2添加了一个id，标签为textbox
2.javascript代码片段略有修改。。。html代码的其余部分保持原样

我删除了不必要的css和javascript代码并发布了它……请评论它是否对你有用。

<html>
    <head>
    </head>
    <body>
        <div>
            <p>
            <select id = "geometric" onchange="myFunction()"> 
                <option value = "square">Square</option>
                <option value = "circle">Circle</option>
                <option value = "rectangle">Rectangle</option>
                <option value = "equilateraltriangle">Equilateral Triangle</option>
            </select>
            </p>
            <br><br><br>
        </div>
        <div class = "duzen">
            <form name = "radBut">
                    <input type = "radio" name = "shape1" value = "perimeter">Perimeter<br>
                    <input type = "radio" name = "shape2" value = "area">Area<br>
            </form>
            <br><br>
        </div>
        <div class = "duzen1">
                <form>
                    <label>Side/Radius:</label><input type = "text" name = "length1"><br>
                    <label>Side2 for Rectangle:</label><input type = "text" name = "length2" id="do_active"><br>
                </form>
        </div>
        <div class = "duzen2">
            <form>
                <input type="submit" name = "calculate" value="Calculate">
                <input type="submit" name = "reset" value="Reset">
            </form>
        </div>
        <div class = "duzen1">
                <form>
                    <label>Result is:</label><input type = "text" name = "length3"><br>
                </form>
        </div>
        <script>
        document.getElementById('do_active').disabled=true;         
            function myFunction() {
                var elem = document.getElementById('geometric').value;
                if(elem == 'rectangle'){
            document.getElementById('do_active').disabled=false;
                }else{
            document.getElementById('do_active').disabled=true;
                }
            }
        </script>
    </body>
</html>

您可以简单地隐藏/显示"Side2 for Ractangle"，如下所示：

function setShape(shape) {
   var elem = document.getElementById('geometric').value;
   if(elem == "rectangle"){
      console.log('rectangle: make side2 visible')
      document.getElementById('side2label').style.visibility = 'visible';
      document.getElementById('side2input').hidden=false
   }else{
      console.log('not rectangle: hide side2')
      document.getElementById('side2label').style.visibility="hidden"
      document.getElementById('side2input').hidden=true
   }
}

使用这个html:

<form>
<label>Side/Radius:</label><input type = "text" name = "length1">
<br>
<label id="side2label" style="visibility:hidden">Side2 for Rectangle:</label>                    
<input id="side2input" type = "text" name = "length2" hidden><br>
</form>

它不是超级优雅，但它可能是你需要的。稍后，您可能需要使用css类，并在函数中将该类附加到要隐藏/使可见的html元素

编辑：您编写了一个函数，但没有得到任何结果。您的代码有很多工作要做。例如，"周长"answers"区域"单选按钮不会相互排斥并保持选中状态。您有两个元素，id="s1"（请参阅我在上面对您的问题的评论），谁知道还有什么不正确。这应该会让你开始，但这取决于你检查细节（elem2指的是哪个元素？）以及结果是否正确：

if(elem1 == 'square'){
   document.getElementById('length2').disabled=true;
   if(elem2.checked){
     console.log("if")
     num3 = 2*(num1 + num1);
     document.getElementById('length3').value = num3;
   }else if(elem2.checked){
      console.log("else if")
      num3 = num1 * num1;
      document.getElementById('length3').value = num3;
   }
} else if ....

在实际的代码中，您没有在函数中做任何事情，只需选择正确的元素并启用它。

以下是一个简单的片段，用于在选择rectangle:时启用length2元素

function setShape(shape) {
  var elem = document.getElementById('geometric').value;
  console.log(elem);
  if (elem == 'square') {
  } else if (elem == 'circle') {
  } else if (elem == 'rectangle') {
    document.getElementsByName('length2')[0].removeAttribute('disabled');
  } else {
  }
}

div {
  text-align: justify;
  position: Relative;
  border-width: 6px;
  width: 50%;
  left: 575px;
}
.duzen {
  text-align: justify;
  position: Relative;
  border-width: 6px;
  width: 50%;
  left: 625px;
}
.duzen1 {
  text-align: left;
  position: Relative;
  border-width: 100px;
  width: 50%;
  left: 540px;
}
.duzen2 {
  text-align: justify;
  position: Relative;
  border-width: 6px;
  width: 50%;
  left: 600px;
}
label {
  display: inline-block;
  width: 150px;
}

<div>
  <p>Shape:
    <select id="geometric" onchange="setShape(this)">
      <option value="square">Square</option>
      <option value="circle">Circle</option>
      <option value="rectangle">Rectangle</option>
      <option value="equilateraltriangle">Equilateral Triangle</option>
    </select>
  </p>
  <br>
  <br>
  <br>
</div>
<div class="duzen">
  <form name="radBut">
    <input type="radio" name="shape1" value="perimeter">Perimeter
    <br>
    <input type="radio" name="shape2" value="area">Area
    <br>
  </form>
  <br>
  <br>
</div>
<div class="duzen1">
  <form>
    <label>Side/Radius:</label>
    <input type="text" name="length1">
    <br>
    <label>Side2 for Rectangle:</label>
    <input type="text" name="length2" disabled>
    <br>
  </form>
</div>
<div class="duzen2">
  <form>
    <input type="submit" name="calculate" value="Calculate">
    <input type="submit" name="reset" value="Reset">
  </form>
</div>
<div class="duzen1">
  <form>
    <label>Result is:</label>
    <input type="text" name="length3">
    <br>
  </form>
</div>