0

I'm trying to dynamically make more buttons to show further options for my project. When i click my more options button I only see one button added everything you click it. Instead I want it to display 3 buttons and attached those to different functions.

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

Updated with further functions as asked for by leaf

Improve this question
6
  • 2
    $("mainBtn") should be $("#mainBtn") since it is an id. Also your on click bindings near the bottom also appear to be invalid selectors. Commented Mar 27, 2018 at 18:01
  • 1
    $("firstBtn").on('click', triangleCalc() ); should also not be putting the () on the triangleCalc if you want it to be called on click. The () makes it invoke immediately. $("thirdBtn").on('click', triangleCalc(), rightTriCalc()); also is invalid syntax as a binding expects only one callback at a time. Commented Mar 27, 2018 at 18:04
  • 1
    There is several syntax issues... Like ("div").append(...) where the $ sign is missing. Commented Mar 27, 2018 at 18:16
  • @Taplar What if triangleCalc returns a function ? Furthermore $("thirdBtn").on('click', triangleCalc(), rightTriCalc()); is not invalid. Commented Mar 27, 2018 at 18:16
  • 1
    @Zack We need to see triangleCalc, rightTriCalc and remove. Otherwise you are likely to collect more sloppy comments and answers. Commented Mar 27, 2018 at 18:24

2 Answers 2

Reset to default
1

There is a couple syntax issues in your code...

I'm not sure which would be relevant to explain here.
Please have a look at this updated code... And ask about what you don't get.

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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Appreciate your response!! this made me realize just how off I was, my only question refers to the .on('click', function), aspect i saw other people say to get rid of the for () part (for instance rightTriCalc() ). whats the difference between keeping it vs leaving it off
@ZackMaguffin: Instead of explaining the parenthesis usage and take a chance to be unclear or wrong... I defer to this already existing explanation. ;)
0

You can create a separate div tag, and append buttons to that. Here I added <div id = "test"></div> and appended buttons to it with 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>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.