jQuery addClass example

Change class name on click in jQuery

by wrschneider

HTML

<body>
  <h4>
    Calculate precision/scale of Redshift division
  </h4>
  <table>
    <tr>
      <td>Numerator precision </td>
      <td><input type="text" name="p1" value="38" /> </td>
      <td>scale <input type="text" name="s1" value="10" /></td>
    </tr>
    <tr>
      <td>Denominator precision </td>
      <td><input type="text" name="p2" value="38" /> </td>
      <td>scale <input type="text" name="s2" value="10" /></td>
    </tr>

  </table>

  <BR/>
  <br/>
  <button id="calculate">
Calculate
</button>
  <br/>
  <div id="result">
  </div>
  <br/>
  Notes:
  <ul>
  <li>SUM result is always precision 38</li>
  <li>smallint behaves like decimal(5,0)</li>
  <li>integer behaves like decimal(10,0)</li>
  <li>bigint behaves like decimal(19,0)</li>
  
  </ul>
  </uL>

</body>

CSS

body {
  background: #ffffff;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

// find elements
var button = $("#calculate")

// handle click and add class
button.on("click", function() {
  var p1 = parseInt($("input[name='p1']").val())
  var s1 = parseInt($("input[name='s1']").val())
  var p2 = parseInt($("input[name='p2']").val())
  var s2 = parseInt($("input[name='s2']").val())

  scale = Math.max(4, s1 + p2 - s2 + 1)
  precision = p1 - s1 + s2 + scale

  if (precision > 38) {
    scale = Math.max((38 + scale - precision), 4)
    precision = 38
  }

  $("#result").text("result precision = " + precision + " scale = " + scale)


})