Question

我试图动态制作更多按钮来显示我的项目的更多选项。当我点击我的更多选项按钮时，我只看到一个按钮添加了你点击它的所有内容。相反，我希望它显示3个按钮并将它们附加到不同的功能。

<body>
  <h1>Triangle Tester</h1>
  <div id="inputs">
    <FORM NAME="Inputs" METHOD="GET">
      <p>Please input side one!</p>
      <input id="A" type="text" size="4">

      <p>Please input side two!</p>
      <input id="B" type="text" size="4">

      <p>Please input side three!</p>
      <input id="C" type="text" size="4">
    </FORM>
  </div>
  <br/ >

  <button id = "mainBtn">Show all test options</button>
  <p> Option 1 Result: <span id="outputA"> </p>
  <p> Option 2 Result: <span id="outputB"> </p>
</body>
<script>
function showMore() {
  var firstBtn= document.createElement("Button");
  firstBtn.innerHTML = "(1) Test whether three sides can form a triangle";
  $("mainBtn").appendChild(firstBtn);

  var secondBtn= document.createElement("Button");
  secondBtn.innerHTML = "(2) Test whether three sides can form a right triangle";
  $("div").appendChild(secondBtn);

  var thirdBtn= document.createElement("Button");
  thirdBtn.innerHTML = "(3) Test both 1 and 2";
  $("div").appendChild(thirdBtn);

  var fourthBtn= document.createElement("Button");
  fourthBtn.innerHTML = "(4) clear result";
  $("div").appendChild(fourthBtn);

  $("firstBtn").on('click', triangleCalc);
  $("secondBtn").on('click', rightTriCalc);
  $("thirdBtn").on('click', triangleCalc);
  $("thirdBtn").on('click', rightTriCalc);
  $("fourthBtn").on('click', remove);
}

window.onload = function() {
  var main = document.getElementById("mainBtn");
  main.onclick = showMore;
} 
function triangleCalc() {
var a = parseInt(document.Inputs.A.value);
var b = parseInt(document.Inputs.B.value);
var c = parseInt(document.Inputs.C.value);
var sideA = (a + b);
var sideB = (a + c);
var sideC = (b + c);
    if(sideA > c || sideB > b || sideC > a)
    {
        $("#outputA").innerHTML = "This can form a triangle";
    }
    else {
        $("#outputA").innerHTML = "This cannot form a triangle";
    }
}

function rightTriCalc() {
 var a = parseInt(document.Inputs.A.value);
 var b = parseInt(document.Inputs.B.value);
 var c = parseInt(document.Inputs.C.value);
 var output = $("outputB");
 var inA = a*a;
 var inB = b*b;
 var inC = c * c;
    if( (inA + inB) == inC)
    {
        $("outputB").innerHTML = "This can Form a Right Triangle";
    }
    else 
    {
        $("outputB").innerHTML = "This cannot Form a Right Triangle";
    }
 }

function remove() {
$("Form").removeData("A");
$("Form").removeData("B");
$("Form").removeData("C");
}
</script>

更新了叶子要求的其他功能

Answer 1

您的代码中存在一些语法问题......

我不确定在这里解释哪些是相关的。
请看看这个更新的代码......并询问你没有得到什么。

$(document).ready(function(){
  function showMore() {
    //console.log("ok");
    
    var firstBtn = $("<Button>");
    firstBtn.html("(1) Test whether three sides can form a triangle").attr("id","firstBtn");
    $("#more_btn").append(firstBtn).append("<br>");

    var secondBtn = $("<Button>");
    secondBtn.html("(2) Test whether three sides can form a right triangle").attr("id","secondBtn");
    $("#more_btn").append(secondBtn).append("<br>");

    var thirdBtn = $("<Button>");
    thirdBtn.html("(3) Test both 1 and 2").attr("id","thirdBtn");
    $("#more_btn").append(thirdBtn).append("<br>");

    var fourthBtn = $("<Button>");
    fourthBtn.html("(4) clear result").attr("id","fourthBtn");
    $("#more_btn").append(fourthBtn).append("<br>");

    $("#firstBtn").on('click', triangleCalc() );
    $("#secondBtn").on('click', rightTriCalc() );
    $("#thirdBtn").on('click', triangleCalc(), rightTriCalc());
    $("#fourthBtn").on('click', function(){
      $(this).remove();
    });
  }

  function triangleCalc(){}
  function rightTriCalc(){}
  
  $("#mainBtn").on("click", showMore);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <h1>Triangle Tester</h1>
  <div id="inputs">
    <FORM NAME="Inputs" METHOD="GET">
      <p>Please input side one!</p>
      <input id="A" type="text" size="4">

      <p>Please input side two!</p>
      <input id="B" type="text" size="4">

      <p>Please input side three!</p>
      <input id="C" type="text" size="4">
      
      <div id="more_btn"></div>
      
    </FORM>
  </div>
  <br/ >

  <button id = "mainBtn">Show all test options</button>
  <p> Option 1 Result: <span id="outputA"> </p>
  <p> Option 2 Result: <span id="outputB"> </p>
</body>

Answer 2

您可以创建一个单独的div标签，并为其添加按钮。在这里，我使用<div id = "test"></div>

添加了

var div = document.getElementById('test');
div.appendChild(firstBtn);

和附加按钮

<body>
    <h1>Triangle Tester</h1>
    <div id="inputs">
    <FORM NAME="Inputs" METHOD="GET">
        <p>Please input side one!</p>
        <input id="A" type="text" size="4">

        <p>Please input side two!</p>
        <input id="B" type="text" size="4">

        <p>Please input side three!</p>
        <input id="C" type="text" size="4">
    </FORM>
    </div>
    <br/ >

    <button id = "mainBtn">Show all test options</button>
    <div id = "test"></div>
    <p> Option 1 Result: <span id="outputA"> </p>
    <p> Option 2 Result: <span id="outputB"> </p>
</body>

<script>
function showMore() {
var firstBtn= document.createElement("Button");
firstBtn.innerHTML = "(1) Test whether three sides can form a triangle";
var div = document.getElementById('test');
div.appendChild(firstBtn);

var secondBtn= document.createElement("Button");
secondBtn.innerHTML = "(2) Test whether three sides can form a right triangle";
div.append(secondBtn);

var thirdBtn= document.createElement("Button");
thirdBtn.innerHTML = "(3) Test both 1 and 2";
div.append(thirdBtn);

var fourthBtn= document.createElement("Button");
fourthBtn.innerHTML = "(4) clear result";
div.append(fourthBtn);

$("firstBtn").on('click', triangleCalc() );
$("secondBtn").on('click', rightTriCalc() );
$("thirdBtn").on('click', triangleCalc(), rightTriCalc());
$("fourthBtn").on('click', remove());
}

window.onload = function() {
var main = document.getElementById("mainBtn");
main.onclick = showMore;
}
</script>

在jQuery中动态添加按钮

2 个答案: