CODEWITHSUNDEEP
javascriptjqueryhtml
Dylan McGrath
Dylan McGrath

Reputation: 151

Clearing HTML breaks append in jquery

Below is the code for a simple javascript/jquery percent change calculator. The user enters the their two desired values in two separate forms and the result is returned in a div below. The there are two buttons, Calculate (calls the pChange function) and Clear the Div (calls the clear function). The function works fine until a user clears the answer div using the Clear function. After the clear button is pushed the function no longer appends the answer text to the answer text div.

//Percent change Calculation
var pChange = function(){
    var a = document.getElementById("number1").value;
    var b = document.getElementById("number2").value;
    var c = b-a;
    var fOutPut = c / a;
    fOutput=fOutPut*100;
    var finalOut=fOutput.toFixed(2);
    $('#answerText').append("<p><strong>" + "The percentage change is  "+finalOut+ "%" + "</strong></p>");
};

//ClearPage Function
var Clear = function(){
    $('#answer').html("");
}; 
//Submit via enter key press instead of button event.
$("#number2").keyup(function(event){
    if(event.keyCode == 13){
        $("#Calc").click();
    }
});

Also, The HTML

<html>
    <head>
        <script src="jquery-2.1.3.min.js"></script>
        <script src="materialize/js/materialize.min.js"></script>
        <script src="slidebars.min.js"></script>
        <link type="text/css" rel="stylesheet" href="materialize/css/materialize.css"  media="screen,projection"/>
        <title>Percent Change Calculator</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <!-- Slidebars CSS -->
        <link rel="stylesheet" href="slidebars.css">
        <link rel="stylesheet" href="Percent.css"
    </head>

    <body>  
    <!--Main content-->
        <div id="sb-site">
        <div class="navbar-fixed">
          <nav>
    <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
    <div class="nav-wrapper">
    <div class="sb-toggle-left">
      <a href="#" class="brand-logo"><img class="navicon" src="navicon-round.svg"></img></a>
      </div>
      <a href="#" class="brand-logo center">Percent Change Calculator</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a class="dropdown-button" href="#" data-activates="dropdown1">Math Tools<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
      </ul>

    </div>
  </nav>
  </div>
  <ul id="dropdown1" class="dropdown-content">
    <li><a href="#">Percent Change</a></li>
    <li class="divider"></li>
    <li><a href="trianglecalculator.html">Triangle Calculator</a></li>
    </ul>
        <!--Alternate Menu Toggle-->

        <!--<div id="ButtonContainer">
        <div class="sb-toggle-left">
        <div class="navicon-line"></div>
        <div class="navicon-line"></div>
        <div class="navicon-line"></div>
        </div>-->
    <div id="input-fields">
    <div class="row">
    <div class="input-field col s3">
        <input value="Number #1" id="number1" type="number" class="validate">
        <label class="active" for="number1">Number #1</label>
        </div>
        </div>
        <div class="row">
        <div class='input-field col s3'>
        <input value="Number #1" id="number2" type="number" class="validate">
        <label class="active" for="number2">Number #2</label>
        </div>
        </div>


    <div id='answer'>
    <div id='answerText'></div></div>
    <table>
    <tr>
    <td>
    <button id = "Calc" type = 'button' onclick = "pChange();">Click to Calculate     Percent Change</button>
    </td>
    <td>
    <button id = "Clear" type = 'button' onclick = "Clear();">Click to clear screen</button>
    </td>
    </tr>
    </table>
    </div>
        </div>

        <div class="sb-slidebar sb-left sb-width-custom" data-sb-width="140">
            <!-- Your left Slidebar content. -->
        <ul id="dropdown2" class="dropdown-content">
        <li><a href="#">About Me</a></li>
        <li class="divider"></li>
        <li><a href="#">About This Site</a></li>
        </ul>
        <ul id="homedropdown" class="dropdown-content">
        </li>
        <li><a href="#!">two</a></li>
        <li><a href="#!">three</a></li>
      </ul>
      <a class="btn dropdown-button" href="#!" data-activates="dropdown2">About<i class="mdi-navigation-arrow-drop-down right"></i></a>
      <a class="btn dropdown-button" href="#!" data-activates="homedropdown">Tools<i class="mdi-navigation-arrow-drop-down right"></i></a>

        <div class="sb-slidebar sb-right">

        </div>

        </body>
        </html>

Upvotes: 0

Views: 137

Answers (1)

adeneo
adeneo

Reputation: 318302

You're adding the answer to #answerText, yet you're clearing the element with the ID #answer, that contains the #answerText element, so you've just removed the element that takes the answer, note the markup

<div id='answer'>
    <div id='answerText'></div>
</div>

You should be clearing #answerText

var Clear = function(){
    $('#answerText').html("");
};

Upvotes: 2

Related Questions