Develop Reference

how can click radio then display div or hidden

when I onclick the radio,
how can display or hidden the div?
because I writing this code, it cannot work.
<div class="col-12 gap-24"><div class="row"><span class="col-2"><input class="" type="radio" name="payway" value="5" οnclick="myFunction();">Store</span></div></div>
</div>
<script>
function myFunction() {
var check_pick = document.getElementById("check_pick");
var check_pick1 = document.getElementById("check_pick1");
if (check_pick.style.display === "none") {
check_pick.style.display = "block";
} else {
check_pick.style.display = "none";
}
if (check_pick1.style.display === "none") {
check_pick1.style.display = "block";
} else {
check_pick1.style.display = "none";
}
}
</script>
<label class="h4" name="check_pick" id="check_pick">Pick up method</label>
<div class="row_4 border" name="check_pick1" id="check_pick1">

set up your listener after window has loaded
window.onload = function() {
/* you can assign a listener like this:
var radio = document.getElementById('radio');
radio.onclick = myFunction;
or like this: */
document.getElementById("radio").addEventListener("click", myFunction);
var check_pick = document.getElementById("check_pick");
check_pick.style.display='none'
var check_pick1 = document.getElementById("check_pick1");
check_pick1.style.display='none'
}
function myFunction() {
var check_pick = document.getElementById("check_pick");
var radio = document.getElementById("radio");
var check_pick1 = document.getElementById("check_pick1");
if (check_pick.style.display === "none") {
check_pick.style.display = "block";
} else {
check_pick.style.display = "none";
radio.checked = false
}
if (check_pick1.style.display === "none") {
check_pick1.style.display = "block";
} else {
check_pick1.style.display = "none";
}
}
#check_pick,#check_pick1{
display:none;}
<div class="col-12 gap-24">
<div class="row">
<input id='radio' type="radio" name="payway" value="5" />Store
</div>
</div>
<label class="h4" name="check_pick" id="check_pick">Pick up method</label>
<div class="row_4 border" name="check_pick1" id="check_pick1">xxx</div>

The really nasty problem with the posted code is the presence of the greek letter ο, namely a greek omicron character in lower case, in the attribute value οnclick="myFunction(). This stops the onclick attribute being recognized without generating an error:
console.log(
'οnclick="myFunction();"' === 'onclick="myFunction();"'
);
console.log("0x0" + 'οnclick="myFunction();"'.charCodeAt(0).toString(16));
You may wish to investigate where the omicron came from. Hopefully it was caused by selecting the wrong keyboard language when originally typed in.

Trigger a button click to change divs when a specific string is entered on the text field?

I'm working on a short quiz game, and I cant seem to figure out how/what event listener would be suitable for detecting a specific string on the textbox. Here's what I have so far (which only works if the "else if" part is taken out- without detecting the specific string)
HTML:
<div id="ques1" class="ques">
<img src="img/img1.png" alt="">
<div id="btncontainer" class="btncontainer">
<input id="txtbox" placeholder="Type here"/>
<button id="go1" class="gobttn"><i>NEXT<i></button>
</div>
</div>
<div id="ques2" class="ques">
<img src="img/img2.png" alt="">
</div>
JS:
var s2 = document.getElementById('ques1')
var s3 = document.getElementById('ques2')
var b1 = document.getElementById('landbtn')
var b2 = document.getElementById('go1')
var tbox = document.getElementById('txtbox')
function Quest1To2() {
s2.style.display = 'none';
s3.style.display = 'block';
}
b2.addEventListener('click', Quest1To2)
function TxtErr() {
tbox.style.outline = '0.2em solid red';
}
b2.addEventListener('click', TxtErr)
var a1 = "NEO";
var answer = txtbox.value
if (answer == a1) {
Quest1To2();
}
else if () {
TxtErr();
}

You can use input event to dispatch an event when input occurs at tbox.
tbox.oninput = function(e) {
if (e.target.value == a1) {
Quest1To2();
}
else {
TxtErr();
}
}

How to use function switchVisible by class name?

I am trying to use pure JavaScript using the function switchVisible. I currently have it working using getElementById, but I have more than one element I want to show and hide when a button is clicked.
Right now my javascript looks like
function switchVisible() {
if (document.getElementById('locked')) {
if (document.getElementById('locked').style.display == 'none') {
document.getElementById('locked').style.display = 'inline-block';
document.getElementById('unlocked').style.display = 'none';
}
else {
document.getElementById('locked').style.display = 'none';
document.getElementById('unlocked').style.display = 'inline-block';
}
}
}
CSS
#unlocked {
display: none;
}
HTML
<input id="edit-invoice" type="button" value="Edit Invoice" onclick="switchVisible();" />
<p id="locked" class="locked">anexample.pdf</p>
<input id="unlocked" class="unlocked" type="text" placeholder="anexample.pdf">
This works so far, but it can only target one element because it is by Id. How could I take this script and change it so I can target elements by class name so I can hide and show multiple elements on button click?

You can target multiple elements by class name
function switchVisible() {
// Get locked and unlocked elements by class name
let lockedElems = document.querySelectorAll(".locked");
let unlockedElems = document.querySelectorAll(".unlocked");
// Loop through locked elements
Array.prototype.map.call(lockedElems, function(locked, index) {
// Get current unlocked element
let unlocked = unlockedElems[index];
// Do your thing
if (locked) {
if (locked.style.display == "none") {
locked.style.display = "inline-block";
unlocked.style.display = "none";
} else {
locked.style.display = "none";
unlocked.style.display = "inline-block";
}
}
});
}
.unlocked {
display: none;
}
<input id="edit-invoice" type="button" value="Edit Invoice" onclick="switchVisible()" />
<p class="locked">anexample.pdf</p>
<input class="unlocked" type="text" placeholder="anexample.pdf">
<p class="locked">anexample.pdf</p>
<input class="unlocked" type="text" placeholder="anexample.pdf">
<p class="locked">anexample.pdf</p>
<input class="unlocked" type="text" placeholder="anexample.pdf">

Use getElementsByClassName and loop over the results.
function switchVisible() {
var locked = getElementsByClassName('locked');
for (var i = 0; i < locked.length; i++) {
if (locked[i].style.display == 'none') {
document.getElementById('locked').style.display = 'inline-block';
locked[i].nextElementSibling.style.display = 'none';
}
else {
locked[i].style.display = 'none';
locked[i].nextElementSibling.style.display = 'inline-block';
}
}
}

stop loading image on form submit if required field

On https://bm-translations.de/#kontakt I've got a form with a submit button, that is replaced with a loading gif, when clicked.
The problem is: if one of the required fields isnt set, the form does not submit but the loading gif appears and doesnt disappear. How to say only appear if all required fields are set?
This is the HTML:
<div id="formsubmitbutton">
<input type="submit" name="submitter" value="Submit Button" onclick="ButtonClicked()">
</div>
<div id="buttonreplacement" style="margin-left:30px; display:none;">
<img src="./bilder/preload.gif" alt="loading...">
</div>
This is the JS:
function ButtonClicked()
{
document.getElementById("formsubmitbutton").style.display = "none"; // to undisplay
document.getElementById("buttonreplacement").style.display = ""; // to display
return true;
}
var FirstLoading = true;
function RestoreSubmitButton()
{
if( FirstLoading )
{
FirstLoading = false;
return;
}
document.getElementById("formsubmitbutton").style.display = ""; // to display
document.getElementById("buttonreplacement").style.display = "none"; // to undisplay
}
// To disable restoring submit button, disable or delete next line.
document.onfocus = RestoreSubmitButton;

Here you go with a solution https://jsfiddle.net/z7wfj880/2/
ButtonClicked = function(){
var validate = true;
$('input:required').each(function(){
if($(this).val().trim() === ''){
validate = false;
}
});
if(validate) {
document.getElementById("formsubmitbutton").style.display = "none"; // to undisplay
document.getElementById("buttonreplacement").style.display = ""; // to display
return true;
}
}
var FirstLoading = true;
function RestoreSubmitButton()
{
if( FirstLoading )
{
FirstLoading = false;
return;
}
document.getElementById("formsubmitbutton").style.display = ""; // to display
document.getElementById("buttonreplacement").style.display = "none"; // to undisplay
}
// To disable restoring submit button, disable or delete next line.
document.onfocus = RestoreSubmitButton;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="First Name" required/>
<input type="text" placeholder="Middle Name"/>
<input type="text" placeholder="Last Name" required/>
<div id="formsubmitbutton">
<input type="submit" name="submitter" value="Submit Button" onclick="ButtonClicked()">
</div>
<div id="buttonreplacement" style="margin-left:30px; display:none;">
<img src="./bilder/preload.gif" alt="loading...">
</div>
First of all do a trim of required input field, so that if any user provide spaces it will remove the extra spaces in front & end.
Loop through all the required input & check for empty input.

You can create a modular function to display and hide the loader.
Now when you click the submit button, you can check for your form validation and toggle the loader easily. I have hardcoded the false, but you can check for the appropriate validation.
function displayLoading(form, loader) {
document.getElementById("formsubmitbutton").style.display = form; // to undisplay
document.getElementById("buttonreplacement").style.display = loader; // to display
}
function ButtonClicked()
{
if(false) { // form in valid
displayLoading('none', '');
} else {
displayLoading('', 'none');
}
}
var FirstLoading = true;
function RestoreSubmitButton()
{
if( FirstLoading )
{
FirstLoading = false;
return;
}
document.getElementById("formsubmitbutton").style.display = ""; // to display
document.getElementById("buttonreplacement").style.display = "none"; // to undisplay
}
// To disable restoring submit button, disable or delete next line.
document.onfocus = RestoreSubmitButton;
<div id="formsubmitbutton">
<input type="submit" name="submitter" value="Submit Button" onclick="ButtonClicked()">
</div>
<div id="buttonreplacement" style="margin-left:30px; display:none;">
<img src="http://gph.is/1cYmtb9" alt="loading...">
</div>

Check for validation of required fields.
If all fields are set then only call buttonreplacement.
For Eg: If you have fields field1 and field2.
f1 = document.getElementById("id_field1").value;
f2 = document.getElementById("id_field2").value;
if (f1!=null || f1!=undefined || f1!="" || f2!=null || f2!=undefined || f2!=""){
document.getElementById("buttonreplacement").style.display = "none";
}
else{
document.getElementById("buttonreplacement").style.display = "block";
}
You can always improve your code using Jquery.

Show loading gif onkeypress

So I have an input and dataList:
<div id="namearea">
<h2>City Name:</h2>
<div>
<input id="citiesinput" list="cities">
<datalist id="cities"></datalist>
<button id="search">
Search
</button>
<span class="loading" id="loadingnames">
<img src="/gif" alt="icon" />
Loading...
</span>
</div>
</div>
I have already used JS to fill the dataList with options.
What I want to do is display the loading gif from when i start typing in the input until I have chosen an option or pressed the search button
current JS:
var cityArray;
window.onload = function() {
processCities();
document.getElementById("search").onclick = findWeather;
document.getElementById("citiesinput").addEventListener("onkeypress", showLoad);
};
function showLoad () {
var input = document.getElementById("citiesinput").value;
if(input !== "" || cityArray.indexOf(input) == -1) {
document.getElementById("loadingnames").style.display = "block";
}
}

I have put a fiddle together for you here. I use the keyup event because the keypress event is called before the first key is registered in the input value.
input.addEventListener('keyup', function(){
loading.style.display = input.value.length ? 'block' : 'none';
});
You must also remember to remove the loader if the condition is not met.

Use opacity instead of display. Reason being when you set the display to inline-block, you will find your parent div "glitching" its height to adjust its content to the image div
Use keyup event after you press a key, it will trigger the function
var cityArray;
cityArray = ["city1", "city2"]
function findWeather() {
}
window.onload = function() {
//processCities();
//document.getElementById("search").onclick = findWeather;
document.getElementById("citiesinput").addEventListener("keyup", showLoad);
document.getElementById("search").addEventListener("click", showLoad);
};
function showLoad() {
var input = document.getElementById("citiesinput").value.trim();
if (input == "") {
document.getElementById("loadingnames").style.opacity = "0";
return
}
if (cityArray.indexOf(input) == -1) {
document.getElementById("loadingnames").style.opacity = "1";
} else {
document.getElementById("loadingnames").style.opacity = "0";
}
}
<div id="namearea">
<h2>City Name:</h2>
<div>
<input id="citiesinput" list="cities">
<datalist id="cities"></datalist>
<button id="search">
Search
</button>
<span class="loading" id="loadingnames" style="opacity:0;">
<img src="http://bestwallpaperhd.com/wp-content/uploads/2012/12/animated-wallpaper-gif.gif" alt="icon " id="city_img " style="width:50px;height:50px;"/>Loading...
</span>
</div>
</div>