We Keep Coding

Append a button when user check the check box and vice versa

Here is an input field. which returned from an ajax response, and then appended to another div.
Now I want when on any checkbox a user clicks a button with some data will be appended to a specific div.
<input name="new" onclick="showButton()" value=1 type="checkbox" id="switchButton" data-id="' + order.id + '" data-toggle="toggle">
This is the div where i want to append the button.
<div id="setBgColor" class="px-1 py-1 shadow"
style="height: 600px;width: 320px;position: relative;border: solid black 15px;
border-radius: 24px; background-color: #7ecff4;margin-top: -70px;">
first i tried the custom function but it doesnt work properly.
function showButton() {
$('#setBgColor').html('<div><button type="button" class="btn btn-sm btn-block btn-primary"> </button></div>');
}
Then I tried this jquery code but it also does nothing.
$('#switchButton').on('click').each(function(){
$('#setBgColor').html('<div><button type="button" ckass="btn btn-sm btn-block btn-primary"> </button></div>');
});

You don't need to define event using jquery. Replace onclick with onchange on input tag
Since we are using checkbox, we need to use onchange event
Can you try
<input name="new" onchange="showButton()" value=1 type="checkbox" id="switchButton" data-id="' + order.id + '" data-toggle="toggle">

How to get element with a certain attribute and without another with vanilla js?

I am trying to get an element that has an attribute of title="some title" but there are multiple ones that come back and I'm to get the first one that has no style attribute.
I tried adding the :not[style] to my select it as an additional argument but it did not work.
document.querySelector(':not([style])', 'not[title="Add to Bag"]');
the element I'm looking for should be:
<button type="submit" class="pdp-add-to-bag add-to-cart pid-19GRB-004f78165ba0cb247a9d38d110" title="Add to Bag">Add to Bag</button>

Combine the two selectors - '[title="Add to Bag"]:not([style])':
const els = document.querySelectorAll('[title="Add to Bag"]:not([style])');
console.log('Number of buttons found: ', els.length);
console.log(els[0]);
<button type="submit" class="pdp-add-to-bag add-to-cart pid-19GRB-004f78165ba0cb247a9d38d110" title="Add to Bag">Add to Bag</button>
<button type="submit" class="pdp-add-to-bag add-to-cart pid-19GRB-004f78165ba0cb247a9d38d110" title="Add to Bag" style="color: red;">Add to Bag</button>

How to stop next page to be loading

In my project, while a particular button is clicked I want to stop the next page appearing. Here is my JavaScript code:
function checkcond() {
check_value=document.getElementById("chkvalue");
if(check_value==null){
alert(check_value);
document.firstform.textview.focus();
return false;
}
}
and button code is:
<form id="payment_form" name="payment_form" action="<?php echo site_url("cont/accept");?>" method="post">
<input id="chkvalue" name="chkvalue" type="hidden">
<button type="submit" id="submit_button" class="btn btn-primary" onclick="checkcond()">
<b>Make a Payment</b>
<span class="fa fa-hand-o-right" aria-hidden="true"></span>
</button>
Here after checking the check_value I want to keep my current page while it is null. How should it be done? Is there any function for that?

My suggestion would be to remove inline javascript
and use like this
document.getElementById('payment_form').onsubmit = function() {
return checkcond();
};
or if you want to use inline method, change onclick method like this
<button type="submit" id="submit_button" class="btn btn-primary" onclick="return checkcond()"><b>Make a Payment</b>

LocalStorage on button click

i have page register here
and i wanna use LocalStorage to show email verifiaction after register.
but i still confuse with method after click and before click.
i have notification here
<div class="alert success">
and i have input button here
<input type="submit" class="btn btn-default size-new-account" value="<?php esc_attr_e( 'Create new account', 'woocommerce' ); ?>" />
i set a localstorage on script like
localStorage.setItem('register1','.alert.success');
jQuery('input.btn.btn-default.size-new-account').click(function(){
var reg = localStorage.getItem('register1');
});
but it wont works.
the div notification i set display: none; in .css

LocalStorage not for showing or hiding element, it store string, use .show(), .hide() instead
localStorage.setItem('register1', 'Im string from localStorage');
jQuery('input.btn.btn-default.size-new-account').click(function() {
var reg = localStorage.getItem('register1');
$('.alert.success').html(reg);
$('.alert.success').show();
});
.alert.success {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="alert success">I'm hidden</div>
<input type="submit" class="btn btn-default size-new-account" value="submit" />

Highlight Specific Button Upon Page Load

I'm building a quiz app, and for a certain part of it I would like for some of the answers to be highlighted upon loading of the page.
These are the buttons:
<input type="hidden" name="correct_answer" value="<?php echo (isset($correct_answer)) ? $correct_answer : 'no corect answer';?>">
<button name="answer" value="A" class="btn btn-primary btn-lg">A</button>
<button name="answer" value="B" class="btn btn-primary btn-lg">B</button>
<button name="answer" value="C" class="btn btn-primary btn-lg">C</button>
<button name="answer" value="D" class="btn btn-primary btn-lg">D</button>
<button name="answer" value="E" class="btn btn-primary btn-lg">E</button>
You can see I'm loading a hidden element with the correct answer inside it.
All the back end works just fine, But I can't seem to figure out how to do this.
Is it possible to do this in native JS or is jQuery a must?
Also, how do I go about doing this? How do I make sure the CSS class is added to the right element?
EDIT:
This is the code I ended up using:
<script type="text/javascript">
document.getElementById("<?php echo $correct_answer;?>").style.backgroundColor = "green";
</script>

You can do this with vanila javascript using the backgroundColor,
So your js code would look like:
document.getElementById("answer1").style.backgroundColor = "red";
Working Fiddle
Please note that I have set Id for one element, however you can set for all elements and use that Id whose background is to be changed.

Since you're already rendering the page with PHP, why not just have it add a class to those elements you want highlighted.
<button name="answer" value="A" class="btn btn-primary btn-lg <?php if ($correct_answer === "A") { ?>highlight<?php } ?>">A</button>
Then style that class:
.highlight {
background-color: red;
}
Even if you were to use javascript to solve this, adding a class is far better than adding styles to an element. The class is more semantic and can be easily restyled without having to dig through your code.

Here's a pure JavaScript solution that will work with your existing HTML:
var correct= document.getElementsByName('correct_answer')[0].value;
var buttons= document.getElementsByName('answer');
for(var i = 0 ; i < buttons.length ; i++) {
if(buttons[i].value===correct) {
buttons[i].style.background= 'red';
break;
}
}
Fiddle at http://jsfiddle.net/qw7qhvnq/