We Keep Coding

How to get input value after it has been changed by jQuery

I have to get the value of .qty input field but I have a problem that another jQuery function is rewriting the entered value after it gets entered.
For instance, if I enter 1, it gets rounded to 3,3360 but multiplied by 1 so I only can get the written value but I need the value that is changed after (3,3360) and the result should be 33.36 not 10.00:
function myFunctionupdateqtyinput() {
var x = document.getElementById("quantity_60269d6f09cd1");
var a = 3.336;
var b = x.value;
var d = b - (b % a) + a;
var f = d.toPrecision(5);
x.value = f;
}
if ($(".kpt-product-count").length) {
function checkForCount() {
var single_count = parseFloat($(".kpt-product-count").data('kptcount'));
var qty = parseFloat($(".qty").val());
var total = (qty * single_count);
total = total.toFixed(2);
if (isNaN(total)) {
total = single_count.toFixed(2);
}
$(".kpt-product-count-text").find('span').html(total);
}
$(".qty").on('input', checkForCount);
}
#import url("https://tonicuk.com/wp-content/plugins/woocommerce/assets/css/woocommerce-layout.css");
#import url("https://tonicuk.com/wp-content/plugins/woocommerce/assets/css/woocommerce-smallscreen.css");
#import url("https://tonicuk.com/wp-content/plugins/woocommerce/assets/css/woocommerce.css");
.quantity .qty {
height: 34px;
}
.quantitym2 .qty {
width: 90;
margin-right: 10;
}
.kpt-product-count {
display: inline-flex;
font-size: 15px;
margin-top: 15px;
}
.kpt-product-count-label {
font-weight: 600;
padding-right: 10px;
}
.quantitym2 input::-webkit-inner-spin-button {
display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="quantity quantitym2">
<label class="screen-reader-text" for="quantity_60269d6f09cd1">Boost quantity</label>
<input type="number" onchange="myFunctionupdateqtyinput()" id="quantity_60269d6f09cd1" class="input-text qty text" value="3.336" step="0.0001" min="0.0001" max="" name="quantity" title="title" size="4" placeholder="" inputmode="">
</div>
<div class="kpt-product-count" data-kptcount="10">
<div class='kpt-product-count-label'>In total: </div>
<div class='kpt-product-count-text'> <span>10</span> </div>
</div>

You need to call the function myFunctionupdateqtyinput()inside the checkForCount function
function checkForCount() {
myFunctionupdateqtyinput();
function myFunctionupdateqtyinput() {
var x = document.getElementById("quantity_60269d6f09cd1");
var a = 3.336;
var b = x.value;
var d = b - (b % a) + a;
var f = d.toPrecision(5);
x.value = f;
}
if ($(".kpt-product-count").length) {
function checkForCount() {
myFunctionupdateqtyinput();
var single_count = parseFloat($(".kpt-product-count").data('kptcount'));
var qty = parseFloat($(".qty").val());
var total = (qty * single_count);
total = total.toFixed(2);
if (isNaN(total)) {
total = single_count.toFixed(2);
}
$(".kpt-product-count-text").find('span').html(total);
}
$(".qty").on('input', checkForCount);
}
#import url("https://tonicuk.com/wp-content/plugins/woocommerce/assets/css/woocommerce-layout.css");
#import url("https://tonicuk.com/wp-content/plugins/woocommerce/assets/css/woocommerce-smallscreen.css");
#import url("https://tonicuk.com/wp-content/plugins/woocommerce/assets/css/woocommerce.css");
.quantity .qty {
height: 34px;
}
.quantitym2 .qty {
width: 90;
margin-right: 10;
}
.kpt-product-count {
display: inline-flex;
font-size: 15px;
margin-top: 15px;
}
.kpt-product-count-label {
font-weight: 600;
padding-right: 10px;
}
.quantitym2 input::-webkit-inner-spin-button {
display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="quantity quantitym2">
<label class="screen-reader-text" for="quantity_60269d6f09cd1">Boost quantity</label>
<input type="number" onchange="myFunctionupdateqtyinput()" id="quantity_60269d6f09cd1" class="input-text qty text" value="3.336" step="0.0001" min="0.0001" max="" name="quantity" title="title" size="4" placeholder="" inputmode="">
</div>
<div class="kpt-product-count" data-kptcount="10">
<div class='kpt-product-count-label'>In total: </div>
<div class='kpt-product-count-text'> <span>10</span> </div>
</div>

empty input validation not worked?

I made a simple calculator with javascript , but when i want to validate input , it
display Nan, and if statement not worked to validate empty input ? How to fix this and how to validate empty input by this form and how to remove the Nan Text displayed after empty input submit ?
let b = document.querySelector("#submit");
b.addEventListener("click", function() {
let c = document.querySelector("#plus").value;
let d = document.querySelector("#minus").value;
let result = document.querySelector(".result");
let output = parseInt(c) + parseInt(d);
result.innerHTML = output;
if(c.value == "" && d.value == "") {
console.log("Wrong");
}
else {
console.log("Well Typed");
}
}
)
body {
display:flex;
align-items:center;
background-color:white;
justify-content:center;
font-family:"Montserrat",sans-serif;
flex-direction:column;
}
button {
background-color:#232324;
border:none;
color:white;
padding:10px 17px;
}
.result {
width:50%;
min-height:50px;
background-color:transparent;
display:flex;
align-items:center;
justify-content:center;
flex-direction:row;
}
input {
margin: 20px 0;
padding:10px;
color:black;
background-color:lightgray;
border:none;
}
<body>
<input type="number" placeholder = ""id = "plus">
<input type="number" id = "minus">
<div class="row">
<button id="submit">
+
</button>
<button id="submit">
-
</button>
<button id="submit">
x
</button>
<button id="submit">
÷
</button>
</div>
<span class="result">1</span>
</body>

let b = document.querySelector("#submit");
b.addEventListener("click", function() {
let c = document.querySelector("#plus").value;
let d = document.querySelector("#minus").value;
if(c !== "" && d !== ""){
let result = document.querySelector(".result");
let output = parseInt(c) + parseInt(d);
result.innerHTML = output;
console.log("Well Typed");
}
else{
console.log("Wrong");
}
}
)
body {
display:flex;
align-items:center;
background-color:white;
justify-content:center;
font-family:"Montserrat",sans-serif;
flex-direction:column;
}
button {
background-color:#232324;
border:none;
color:white;
padding:10px 17px;
}
.result {
width:50%;
min-height:50px;
background-color:transparent;
display:flex;
align-items:center;
justify-content:center;
flex-direction:row;
}
input {
margin: 20px 0;
padding:10px;
color:black;
background-color:lightgray;
border:none;
}
<body>
<input type="number" placeholder = ""id = "plus">
<input type="number" id = "minus">
<div class="row">
<button id="submit">
+
</button>
<button id="submit">
-
</button>
<button id="submit">
x
</button>
<button id="submit">
÷
</button>
</div>
<span class="result">1</span>
</body>

The following line already gets the value of the #plus element.
let c = document.querySelector("#plus").value;
Therefore, in the if() statement, there is no need to call .value again;
# wrong
if(c.value == "" && d.value == "") {
#improved
if(c == "" || d == "") {
Improved Code Snippet;
let b = document.querySelector("#submit");
b.addEventListener("click", function() {
let c = document.querySelector("#plus").value;
let d = document.querySelector("#minus").value;
if (c == "" || d == "") {
console.log("Wrong");
} else {
console.log("Well Typed");
let result = document.querySelector(".result");
let output = parseInt(c) + parseInt(d);
result.innerHTML = output;
}
});
body {
display:flex;
align-items:center;
background-color:white;
justify-content:center;
font-family:"Montserrat",sans-serif;
flex-direction:column;
}
button {
background-color:#232324;
border:none;
color:white;
padding:10px 17px;
}
.result {
width:50%;
min-height:50px;
background-color:transparent;
display:flex;
align-items:center;
justify-content:center;
flex-direction:row;
}
input {
margin: 20px 0;
padding:10px;
color:black;
background-color:lightgray;
border:none;
}
<body>
<input type="number" placeholder="" id="plus">
<input type="number" id="minus">
<div class="row">
<button id="submit">
+
</button>
<button id="submit">
-
</button>
<button id="submit">
x
</button>
<button id="submit">
÷
</button>
</div>
<span class="result">1</span>
</body>
Small notes;
I've changed the && (and) to || (or) since 1 empty input should be 'invalid'
HTML id's are unique, you can't have multiple <button id="submit"> (Read more info)

let b = document.querySelector("#submit");
b.addEventListener("click", function() {
let c = document.querySelector("#plus").value;
let d = document.querySelector("#minus").value;
let result = document.querySelector(".result");
let output = parseInt(c) + parseInt(d) || "";
if(c == "" && d == "") {
console.log("Wrong");
}else {
console.log("Well Typed");
}
result.innerHTML = output;
})
body {
display:flex;
align-items:center;
background-color:white;
justify-content:center;
font-family:"Montserrat",sans-serif;
flex-direction:column;
}
button {
background-color:#232324;
border:none;
color:white;
padding:10px 17px;
}
.result {
width:50%;
min-height:50px;
background-color:transparent;
display:flex;
align-items:center;
justify-content:center;
flex-direction:row;
}
input {
margin: 20px 0;
padding:10px;
color:black;
background-color:lightgray;
border:none;
}
<body>
<input type="number" placeholder = ""id = "plus">
<input type="number" id = "minus">
<div class="row">
<button id="submit">
+
</button>
<button id="submit">
-
</button>
<button id="submit">
x
</button>
<button id="submit">
÷
</button>
</div>
<span class="result">1</span>
</body>

I made a else if statement for this code
when the first input has value and the second input has no value
Any suggestions?
if (c == "" && d == "") {
console.log("Wrong");
error.innerHTML = "<h1>Write Number Please>/h1> ";
}
else if(c == "" && d >=0 || c>= 0 && d=="") {
console.log("write value for all inputs");
}
else {
console.log("Well Typed");
result.innerHTML = output;
}
})

.html() not showing the whole text that contains the ' character

When i try to edit the value on fields that contain the ' character in them, it cuts the string to that character. For example if I put O'Hara as name a try to edit it, it will give me only the O from O'Hara. Also on a side note is this "valid", correct way to edit the values of the properties on the the contact objects? Thanks in advance.
class Contact{
constructor(id, first, last, email, password, phone) {
this.id = id || "WTF";
this.first = first || this.get_Random_F_name();
this.last = last || this.get_Random_F_name();
this.email = email || (this.get_Random_F_name() + "#hotmail.com");
this.password = password || Math.floor(Math.random() * Math.floor(90000));
this.phone = phone || Math.floor(Math.random() * Math.floor(500));
}
get_Random_F_name(){
let cityIndex = Math.floor(Math.random() * Math.floor(9));
if(cityIndex == 0){
return "O'mara"
}
else if(cityIndex == 1){
return "F'airfax"
}
else if(cityIndex == 2){
return "C'harlie"
}
else if(cityIndex == 3){
return "Evereteze"
}
else if(cityIndex == 4){
return "H'errera"
}
else if(cityIndex == 5){
return "Guerriero"
}
else if(cityIndex == 6){
return "I'mperio"
}
else if(cityIndex == 7){
return "Levitan"
}
else {
return "A'mato"
}
}
}
function dontCoptThatFloppy(id, first, last, email, password, phone) {
let proactiveBitch = ("<tr><td class='td-id'>"+ id +
"</td><td class='f_Name'>"+first+
"</td><td class='l_Name'>"+last+
"</td><td class='e_mail'>"+email+
"</td><td class='pass_in'>"+password+
"</td><td class='phone_in'>"+phone+
"</td><td class='td-three-Btn'><button class='save-Btn'>save</button>"+
"<button class='edit-Btn'>edit</button><button class='del-Btn'>Broken</button></td>"+
"<td class='td-del'><button class='del-row'>Del</button></td>"+"</tr>")
return proactiveBitch;
}
$(document).ready(function(){
let idCounter = 1;
let a_contacts = [];
let a_contacts2 = [];
let a_contacts3 = [];
let contacts_arr_obj = [];
let new_contacts_arr_obj = contacts_arr_obj;
$('#new-row-btn').click(function(){
let newContact = new Contact(idCounter, $("#name-input").val(), $("#lastname-input").val(), $("#email-input").val(), $("#pass-input").val(), $("#phone-input").val());
$("#my-table").append(dontCoptThatFloppy(idCounter, newContact.first, newContact.last, newContact.email, newContact.password, newContact.phone))
a_contacts.push(newContact);
$("#name-input").val("")
$("#lastname-input").val("")
$("#email-input").val("")
$("#pass-input").val("")
$("#phone-input").val("")
idCounter++;
});
$(document).on('click', '.del-row', function (event) {
$(event.target).parent().parent().remove()
});
$(document).on('click', '.edit-Btn', function (event) {
var $row = $(this).closest('tr');
var id = $row.find('.td-id').text();
var fName = a_contacts[id-1].first;
var lName = a_contacts[id-1].last;
var email = a_contacts[id-1].email;
var pass = a_contacts[id-1].password;
var phone = a_contacts[id-1].phone;
let my_input_f_Name = "<input class='in_f_name' type='text' value='"+fName+"'>"
let my_input_l_Name = "<input class='in_l_name' type='text' value='"+lName+"'>"
let my_input_e_mail = "<input class='in_e_mail' type='text' value='"+email+"'>"
let my_input_pass = "<input class='in_pass_in' type='text' value='"+pass+"'>"
let my_input_phone = "<input class='in_phone_in' type='text' value='"+phone+"'>"
$row.find('.f_Name').html(my_input_f_Name)
$row.find('.l_Name').html(my_input_l_Name)
$row.find('.e_mail').html(my_input_e_mail)
$row.find('.pass_in').html(my_input_pass)
$row.find('.phone_in').html(my_input_phone)
let edit = $row.find('.edit-Btn')
let del_btn = $row.find('.del-Btn')
let save_btn = $row.find('.save-Btn')
edit.css('display','none');
del_btn.css('display','none');
save_btn.css('display','block');
});
$(document).on('click', '.save-Btn', function (event) {
var $row = $(this).closest('tr');
var id = $row.find('.td-id').text();
a_contacts[id-1].first = $row.find('.in_f_name').val();
a_contacts[id-1].last = $row.find('.in_l_name').val();
a_contacts[id-1].email = $row.find('.in_e_mail').val();
a_contacts[id-1].password = $row.find('.in_pass_in').val();
a_contacts[id-1].phone = $row.find('.in_phone_in').val();
$row.find('.f_Name').html( a_contacts[id-1].first);
$row.find('.l_Name').html(a_contacts[id-1].last);
$row.find('.e_mail').html(a_contacts[id-1].email);
$row.find('.pass_in').html(a_contacts[id-1].password);
$row.find('.phone_in').html(a_contacts[id-1].phone);
let edit = $row.find('.edit-Btn')
let del_btn = $row.find('.del-Btn')
let save_btn = $row.find('.save-Btn')
edit.css('display','inline');
del_btn.css('display','inline');
save_btn.css('display','none');
});
$(document).on('click', '#sup', function (event) {
console.log(a_contacts);
});
$("#sort").on("change", function(event){
let pickedValue = event.target.value;
let table = $('#my-table')
let rows = table.find('.td-id').toArray()
if (pickedValue === "1"){
a_contacts.sort(function(a, b){
return a.id - b.id;
});
}
else if (pickedValue === "2"){
a_contacts.sort(function(a,b) {
return a.first.localeCompare(b.first);
});
}
else if (pickedValue === "3"){
a_contacts.sort(function(a,b) {
return a.last.localeCompare(b.last);
});
}
else if (pickedValue === "4"){
a_contacts.sort(function(a,b) {
return a.email.localeCompare(b.email);
});
}
else if (pickedValue === "5"){
a_contacts.sort(function(a, b){
return a.password - b.password;
});
}
else if (pickedValue === "6"){
a_contacts.sort(function(a, b){
return a.phone - b.phone;
});
}
else{}
$(tbody).html("");
for (var i = 0; i < rows.length; i++){
$("#my-table").append(dontCoptThatFloppy(a_contacts[i].id, a_contacts[i].first, a_contacts[i].last, a_contacts[i].email, a_contacts[i].password, a_contacts[i].phone))
}
});
});
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" media="screen" href="CSS/style.css" />
</head>
<body>
<div id="inputs-div">
<input type="text" placeholder="Your Name Sir" id="name-input">
<input type="text" placeholder="Your Last Name Sir" id="lastname-input">
<input type="text" placeholder="Your Email Sir" id="email-input">
<input type="password" placeholder="Your Password Sir" id="pass-input" >
<input type="text" placeholder="Your Phone Number" id="phone-input" >
<button id="new-row-btn">Add Contact</button>
<button id="sup">Console.Log</button>
</div>
<select class="custom-select" id="sort">
<option selected>Choose...</option>
<option value="1">ID</option>
<option value="2">First Name</option>
<option value="3">Last Name</option>
<option value="4">Email</option>
<option value="5">Password</option>
<option value="6">Phone</option>
</select>
<div>
<table id="my-table">
<thead>
<tr id="first-row">
<th>ID</th>
<th>First name</th>
<th>Last name</th>
<th>Email</th>
<th>Password</th>
<th>Phone</th>
<th>Action</th>
<th>Delete</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
<script src="JS/jquery-3.2.1.js"></script>
<script src="JS/script.js"></script>
</body>
</html>
*{
margin: 0px;
padding: 0px;
}
body{
background-color: black;
color: wheat;
}
input{
display: block;
margin: 2px;
border: 2px solid #ac7b11;
background-color: rgba(44, 42, 42, 0.863);
color: #bebe35;
}
::placeholder {
color: #bebe35;
}
button{
background-color: #1a64a0;
border: 2px solid #1a64a0;
color: white;
border-radius: 3px;
outline:none;
/* text-align: center;
display:table-cell;
vertical-align:middle; */
}
#new-row-btn, #sup{
width: 100px;
height: 30px;
margin: 3px;
}
.del-row{
/* display: flex; */
width: 100%;
height: 100%;
/* margin: 0px auto; */
/* text-align: 0px auto; */
}
.small-Btn, .medium-Btn{
display: none;
}
.del-Btn, .edit-Btn{
background-color: #10b133;
border: 2px solid #10b133;
width: 50%;
height: 100%;
}
.save-Btn{
background-color: #a1b110;
border: 2px solid #a1b110;
display: none;
width: 100%;
height: 100%;
}
th{
height: 30px;
width: 100px;
}
td{
height: 30px;
width: 100px;
}
.td-id{
width: 30px;
text-align: center;
}
#my-table tbody tr td {
background-color: #a35635;
}
#my-table tbody tr td:nth-child(odd) {
background-color: #828e20;
}
.td-del, .td-three-Btn{
background-color: transparent !important;
}
td input{
box-sizing: border-box;
width: 100%;
height: 100%;
margin:0px;
}

When you write something like this:
let my_input_f_Name = "<input class='in_f_name' type='text' value='"+fName+"'>"
if the value of fName is O'hara, the resulting HTML is:
<input class='in_f_name' type='text' value='O'hara'>
The ' in the name matches the ' that starts the value attribute, so it ends the attribute; it's equivalen to writing
<input class='in_f_name' type='text' value='O' hara'>
Since you're using jQuery, you can use its methods to create your elements instead of concatenating strings:
let my_input_f_Name = $("<input>", {
"class": "in_f_name",
type: "text",
value: fName
});

How to make explanations in quiz disappear when clicked on another answer?

I have been struggling for a while with this since I'm not a pro.
The issue: A quiz. After you click answer A and then submit, you will get an
explanation next to answer A. When you then click answer B and then submit you
will get an explanation next to answer B but explanation A about answer A remains.
This has to disappear.
Here is the link: https://plnkr.co/edit/OvcwBzfFte4A0F0NbNSi?p=preview
<style>
.quizbox {
width: 58%;
max-width: 950px;
border: 1px gray solid;
margin: auto;
padding: 10px;
border-radius: 10px;
border-width: 5px;
border-color: #00A7AE;
margin-top: 7%;
text-align: center;
position: relative;
background: #73B7DB;
}
.row {
text-align: left;
color: white;
margin-left: 10%;
}
span#demo, #demo2, #demo3 {
display: inline;
color: green;
margin-right: 30%;
float:right;
width:50%;
}
</style>
<div class="quizbox">
<!-- open main div -->
<h1>Quiz</h1>
<form id="form1" action=" ">
<div class="row"> <h3>Moths are a member of what order?</h3></div>
<div class="row">
<input name="variable" type="radio" value="0" />Octagon <span id="demo"></span></div>
<div> </div>
<div class="row">
<input name="variable" type="radio" value="0" />Leprosy <span id="demo2"></span></div>
<div class="row">
<input name="variable" type="radio" value="33" />Lepidoptera <span id="demo3"></span></div>
<p> <input type="submit" onclick="myFunction()" value="Submit" /> </p>
</form>Your grade is: <span id="grade">__</span>
<p id="grade2"></p>
</div>
<!-- close quizbox div -->
<span>fdf</span> <span>fdf</span><span>fdf</span>
fd
<script>
document.getElementById("form1").onsubmit = function(e) {
e.preventDefault();
variable = parseInt(document.querySelector('input[name = "variable"]:checked').value);
sub = parseInt(document.querySelector('input[name = "sub"]:checked').value);
con = parseInt(document.querySelector('input[name = "con"]:checked').value);
result = variable + sub + con;
document.getElementById("grade").innerHTML = result;
var result2 = "";
if (result == 0) {
result2 = "I don't think you studied."
};
if (result == 33) {
result2 = "You need to spend more time. Try again."
};
if (result == 66) {
result2 = "I think you could do better. Try again."
};
if (result == 99) {
result2 = "Excellent!"
};
document.getElementById("grade2").innerHTML = result2;
return false; // required to not refresh the page; just leave this here
} //this ends the submit function
function myFunction() {
var checked = document.querySelector("input[name = 'variable']:checked");
var value = checked.parentNode.lastChild.id;
var answer;
switch (value) {
case 'demo':
answer = "An octagon is an object with 8 sides to it";
break;
case 'demo2':
answer = "Leprosy is a chronic infection";
break;
case 'demo3':
answer = "Yes ! this is correct";
break;
}
checked.parentNode.lastChild.innerHTML = answer;
}
</script>
hgf
<div> </div>

You can give each explanation span a class name of "explanation" and clear their texts each time you call myFunction().
Here's a working demo https://plnkr.co/edit/9TIwKXIxP8A01DeKVWuG?p=preview
<style>
.quizbox {
width: 58%;
max-width: 950px;
border: 1px gray solid;
margin: auto;
padding: 10px;
border-radius: 10px;
border-width: 5px;
border-color: #00A7AE;
margin-top: 7%;
text-align: center;
position: relative;
background: #73B7DB;
}
.row {
text-align: left;
color: white;
margin-left: 10%;
}
span#demo, #demo2, #demo3 {
display: inline;
color: green;
margin-right: 30%;
float:right;
width:50%;
}
</style>
<div class="quizbox">
<!-- open main div -->
<h1>Quiz</h1>
<form id="form1" action=" ">
<div class="row"> <h3>Moths are a member of what order?</h3></div>
<div class="row">
<input name="variable" type="radio" value="0" />Octagon <span class="explanation" id="demo"></span></div>
<div> </div>
<div class="row">
<input name="variable" type="radio" value="0" />Leprosy <span class="explanation" id="demo2"></span></div>
<div class="row">
<input name="variable" type="radio" value="33" />Lepidoptera <span class="explanation" id="demo3"></span></div>
<p> <input type="submit" onclick="myFunction()" value="Submit" /> </p>
</form>Your grade is: <span id="grade">__</span>
<p id="grade2"></p>
</div>
<!-- close quizbox div -->
<span>fdf</span> <span>fdf</span><span>fdf</span>
fd
<script>
document.getElementById("form1").onsubmit = function(e) {
e.preventDefault();
variable = parseInt(document.querySelector('input[name = "variable"]:checked').value);
sub = parseInt(document.querySelector('input[name = "sub"]:checked').value);
con = parseInt(document.querySelector('input[name = "con"]:checked').value);
result = variable + sub + con;
document.getElementById("grade").innerHTML = result;
var result2 = "";
if (result == 0) {
result2 = "I don't think you studied."
};
if (result == 33) {
result2 = "You need to spend more time. Try again."
};
if (result == 66) {
result2 = "I think you could do better. Try again."
};
if (result == 99) {
result2 = "Excellent!"
};
document.getElementById("grade2").innerHTML = result2;
return false; // required to not refresh the page; just leave this here
} //this ends the submit function
function myFunction() {
var explanations = document.querySelectorAll(".explanation");
for(var x = 0; x < explanations.length; x++) {
explanations[x].innerHTML = "";
}
var checked = document.querySelector("input[name = 'variable']:checked");
var value = checked.parentNode.lastChild.id;
var answer;
switch (value) {
case 'demo':
answer = "An octagon is an object with 8 sides to it";
break;
case 'demo2':
answer = "Leprosy is a chronic infection";
break;
case 'demo3':
answer = "Yes ! this is correct";
break;
}
checked.parentNode.lastChild.innerHTML = answer;
}
</script>
hgf
<div> </div>

In html, add class to all <input name="variable"> (note that you cannot have duplicating name attribute on multiple input):
<input class="variable" ...>
Add lines in your myFunction() to get inputs that is not checked:
function myFunction() {
var notChecked = document.getElementsByClassName('variable');
var checked = document.querySelector("input[name = 'variable']:checked");
var value = checked.parentNode.lastChild.id;
var answer;
switch (value) {
case 'demo':
answer = "An octagon is an object with 8 sides to it";
break;
case 'demo2':
answer = "Leprosy is a chronic infection";
break;
case 'demo3':
answer = "Yes ! this is correct";
break;
}
for (var i = 0, len = notChecked.length; i < len; i++){
notChecked[i].parentNode.lastChild.innerHTML = '';
}
checked.parentNode.lastChild.innerHTML = answer;
}

Unable to tigger elements inside the webui-popover

I am working on a app dashboard, where I am trying to add a jquery calculator inside webui-popover. the calculator is working fine outside the popover but when it is inside the popover div it is not working. The plugin author said "This problem is caused by that the plugin stop the event bubbling",
I do not have much knowledge about Jquery or Javascript, If anyone can help me with this it will be nice. So, is there any way to make the calculator work inside popover element?.
Calculator Script taken from HERE
Here is the codes
/* WEBUI SCRIPT*/
(function() {
var settings = {
trigger: 'click',
title: '',
width: 320,
multi: true,
closeable: false,
style: '',
delay: 300,
padding: true
};
function initPopover() {
var tableContent = $('#discalc').html(),
tableSettings = {
content: tableContent,
width: 298
};
$('a.showdisclac').webuiPopover('destroy').webuiPopover($.extend({}, settings, tableSettings));
}
initPopover();
})();
/* CALCULATOR */
$("document").ready(function() {
var key = null;
$(document).on("click", ".clean", function() {
$('.input').val("");
});
$(document).on("click", ".Show", function() {
var EText = $('#Result').val();
if (EText != "0") {
var val1 = EText;
var ButtonVal = $(this);
var val2 = ButtonVal.text();
var Res = val1 + val2;
$('#Result').val(Res);
} else {
$('#Result').val();
}
});
$(function(e) {
var interRes = null;
var operator;
$(document).on("click", ".operators", function(e) {
var value1 = $('#Result').val();
if (interRes != null) {
var result = ApplyOperation(interRes, value1, operator);
interRes = result;
} else {
interRes = value1;
}
operator = $(this).text();
$('input').val("");
});
$(document).on("keypress", "#Result", function(e) {
if ((e.keyCode == 61)) {
var op = operator;
var res;
var value2 = $('#Result').val();
if ((value2 != "")) {
var data = value2.split("+");
if (data.length > 2) res = ApplyOperation(interRes, data[data.length - 1], op);
else res = ApplyOperation(interRes, data[1], op);
} else {
res = interRes;
}
$('#Result').val(res);
interRes = null;
} else if ((e.keyCode == 43) || (e.keyCode == 45) || (e.keyCode == 42) || (e.keyCode == 47)) {
var value1 = $('#Result').val();
var inter = (interRes != null);
if (inter) {
var op = operator;
var data = value1.split("+");
if (data.length > 2) {
operator = String.fromCharCode(e.keyCode);
result = ApplyOperation(interRes, data[data.length - 1], op);
interRes = result;
} else {
operator = String.fromCharCode(e.keyCode);
result = ApplyOperation(interRes, data[1], op);
interRes = result;
}
} else {
interRes = value1;
}
operator = String.fromCharCode(e.keyCode);
$('.input').text("");
}
});
$(document).on("click", "#Calculate", function(e) {
var op = operator;
var res;
var value2 = $('#Result').val();
if ((value2 != "")) {
res = ApplyOperation(interRes, value2, op);
} else {
res = interRes;
}
$('#Result').val(res);
interRes = null;
});
});
function ApplyOperation(value1, value2, operator) {
var res;
switch (operator) {
case "+":
res = addition(value1, value2);
break;
case "-":
res = subtraction(value1, value2);
break;
case "*":
res = multiplication(value1, value2);
break;
case "/":
res = division(value1, value2);
break;
}
return res;
}
function addition(first, second) {
var a = parseFloat(first);
var b = parseFloat(second);
var total = a + b;
return total;
}
function subtraction(first, second) {
var a = parseFloat(first);
var b = parseFloat(second);
var sub = a - b;
return sub;
}
function multiplication(first, second) {
var a = parseFloat(first);
var b = parseFloat(second);
var product = a * b;
return product;
}
function division(first, second) {
var a = parseFloat(first);
var b = parseFloat(second);
var divi = a / b;
return divi;
}
});
<link rel="stylesheet" type="text/css" href="http://sandywalker.github.io/webui-popover/dist/jquery.webui-popover.min.css"> .webui-popover-content {
padding: 0;
}
.webui-popover {
padding: 0;
border: none;
border: 0;
background: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
}
.webui-popover.top>.arrow:after,
.webui-popover.top-right>.arrow:after,
.webui-popover.top-left>.arrow:after {
border-top-color: #525252;
}
.discalc {
display: none;
}
.disresform {
background: #525252;
padding: 20px 5px 20px 5px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
bottom: 0;
position: absolute;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://sandywalker.github.io/webui-popover/dist/jquery.webui-popover.min.js"></script>
Discount
<div id="discalc" class="discalc">
<div class="disresform">
<h2>Simple Calculator</h2>
<input id="Result" class="input" value="0" />
<div id="keys">
<div id="FirstRow">
<button id="ClearAll" type="reset" value="CE" class="clean">CE</button>
<button id="Clear" type="reset" value="C" class="clean">C</button>
<button id="Add" type="button" value="+" class="operators operand">+</button>
</div>
<div id="SecondRow">
<button id="One" type="button" value="1" class="Show">1</button>
<button id="Two" type="button" value="2" class="Show">2</button>
<button id="Three" type="button" value="3" class="Show">3</button>
<button id="Sub" type="button" value="-" class="operators operand">-</button>
</div>
<div id="ThirdRow">
<button id="Four" type="button" value="4" class="Show">4</button>
<button id="Five" type="button" value="5" class="Show">5</button>
<button id="six" type="button" value="6" class="Show">6</button>
<button id="Mul" type="button" value="*" class="operators operand">*</button>
</div>
<div id="FourthRow">
<button id="Seven" type="button" value="7" class="Show">7</button>
<button id="Eight" type="button" value="8" class="Show">8</button>
<button id="Nine" type="button" value="9" class="Show">9</button>
<button id="Divide" type="button" value="/" class="operators operand">/</button>
</div>
<div id="FifthRow">
<button id="Zero" type="button" value="0" class="Show">0</button>
<button id="Dot" type="button" value="." class="Show">.</button>
<button id="Calculate" type="button" value="=" class="operand">=</button>
</div>
</div>
</div>
</div>

Use dismissible:false
/* WEBUI SCRIPT*/
(function() {
var settings = {
trigger: 'click',
title: '',
width: 320,
multi: true,
closeable: false,
style: '',
delay: 300,
padding: true,
dismissible:false
};
function initPopover() {
var tableContent = $('#discalc').html(),
tableSettings = {
content: tableContent,
width: 298
};
$('a.showdisclac').webuiPopover('destroy').webuiPopover($.extend({}, settings, tableSettings));
}
initPopover();
})();
/* CALCULATOR */
$("document").ready(function() {
var key = null;
$(document).on("click", ".clean", function() {
$('.input').val("");
});
$(document).on("click", ".Show", function() {
var EText = $('#Result').val();
if (EText != "0") {
var val1 = EText;
var ButtonVal = $(this);
var val2 = ButtonVal.text();
var Res = val1 + val2;
$('#Result').val(Res);
} else {
$('#Result').val();
}
});
$(function(e) {
var interRes = null;
var operator;
$(document).on("click", ".operators", function(e) {
var value1 = $('#Result').val();
if (interRes != null) {
var result = ApplyOperation(interRes, value1, operator);
interRes = result;
} else {
interRes = value1;
}
operator = $(this).text();
$('input').val("");
});
$(document).on("keypress", "#Result", function(e) {
if ((e.keyCode == 61)) {
var op = operator;
var res;
var value2 = $('#Result').val();
if ((value2 != "")) {
var data = value2.split("+");
if (data.length > 2) res = ApplyOperation(interRes, data[data.length - 1], op);
else res = ApplyOperation(interRes, data[1], op);
} else {
res = interRes;
}
$('#Result').val(res);
interRes = null;
} else if ((e.keyCode == 43) || (e.keyCode == 45) || (e.keyCode == 42) || (e.keyCode == 47)) {
var value1 = $('#Result').val();
var inter = (interRes != null);
if (inter) {
var op = operator;
var data = value1.split("+");
if (data.length > 2) {
operator = String.fromCharCode(e.keyCode);
result = ApplyOperation(interRes, data[data.length - 1], op);
interRes = result;
} else {
operator = String.fromCharCode(e.keyCode);
result = ApplyOperation(interRes, data[1], op);
interRes = result;
}
} else {
interRes = value1;
}
operator = String.fromCharCode(e.keyCode);
$('.input').text("");
}
});
$(document).on("click", "#Calculate", function(e) {
var op = operator;
var res;
var value2 = $('#Result').val();
if ((value2 != "")) {
res = ApplyOperation(interRes, value2, op);
} else {
res = interRes;
}
$('#Result').val(res);
interRes = null;
});
});
function ApplyOperation(value1, value2, operator) {
var res;
switch (operator) {
case "+":
res = addition(value1, value2);
break;
case "-":
res = subtraction(value1, value2);
break;
case "*":
res = multiplication(value1, value2);
break;
case "/":
res = division(value1, value2);
break;
}
return res;
}
function addition(first, second) {
var a = parseFloat(first);
var b = parseFloat(second);
var total = a + b;
return total;
}
function subtraction(first, second) {
var a = parseFloat(first);
var b = parseFloat(second);
var sub = a - b;
return sub;
}
function multiplication(first, second) {
var a = parseFloat(first);
var b = parseFloat(second);
var product = a * b;
return product;
}
function division(first, second) {
var a = parseFloat(first);
var b = parseFloat(second);
var divi = a / b;
return divi;
}
});
<link rel="stylesheet" type="text/css" href="http://sandywalker.github.io/webui-popover/dist/jquery.webui-popover.min.css"> .webui-popover-content {
padding: 0;
}
.webui-popover {
padding: 0;
border: none;
border: 0;
background: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
}
.webui-popover.top>.arrow:after,
.webui-popover.top-right>.arrow:after,
.webui-popover.top-left>.arrow:after {
border-top-color: #525252;
}
.discalc {
display: none;
}
.disresform {
background: #525252;
padding: 20px 5px 20px 5px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-ms-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
bottom: 0;
position: absolute;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://sandywalker.github.io/webui-popover/dist/jquery.webui-popover.min.js"></script>
Discount
<div id="discalc" class="discalc">
<div class="disresform">
<h2>Simple Calculator</h2>
<input id="Result" class="input" value="0" />
<div id="keys">
<div id="FirstRow">
<button id="ClearAll" type="reset" value="CE" class="clean">CE</button>
<button id="Clear" type="reset" value="C" class="clean">C</button>
<button id="Add" type="button" value="+" class="operators operand">+</button>
</div>
<div id="SecondRow">
<button id="One" type="button" value="1" class="Show">1</button>
<button id="Two" type="button" value="2" class="Show">2</button>
<button id="Three" type="button" value="3" class="Show">3</button>
<button id="Sub" type="button" value="-" class="operators operand">-</button>
</div>
<div id="ThirdRow">
<button id="Four" type="button" value="4" class="Show">4</button>
<button id="Five" type="button" value="5" class="Show">5</button>
<button id="six" type="button" value="6" class="Show">6</button>
<button id="Mul" type="button" value="*" class="operators operand">*</button>
</div>
<div id="FourthRow">
<button id="Seven" type="button" value="7" class="Show">7</button>
<button id="Eight" type="button" value="8" class="Show">8</button>
<button id="Nine" type="button" value="9" class="Show">9</button>
<button id="Divide" type="button" value="/" class="operators operand">/</button>
</div>
<div id="FifthRow">
<button id="Zero" type="button" value="0" class="Show">0</button>
<button id="Dot" type="button" value="." class="Show">.</button>
<button id="Calculate" type="button" value="=" class="operand">=</button>
</div>
</div>
</div>
</div>