jQuery addClass example

Change class name on click in jQuery

by Yosef H

HTML

<input type="text"> <button>Update</button>
<br><br>
<span>Input: </span><div class="input"></div>
<br>
<span>Output: </span><div class="output"></div>

CSS

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

input {
  height: 23px; 
}

span {
  font-weight: bold;
}

div.input, div.output {
  display: inline-block;
}

JavaScript

// find elements
var button = $("button");
var input = $("input");
var inputDiv = $(".input");
var outputDiv = $(".output");

var updateDOM = function(inputValue, outputValue) {
	inputDiv.text(inputValue);
  outputDiv.text(outputValue);
};

var processInput = function(inputValue) {
  let outputValue = parseFloat(inputValue.replace(/[^.0-9]/g, ''));
  console.log("outputValue: " +  outputValue);
  updateDOM(inputValue, outputValue);
};

// handle click 
button.on("click", function(){
  inputValue = input.val();
  processInput(inputValue);
})