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.

Why doesn't HTML/JAVASCRIPT recongize my set password?

I am trying to make a login system with a set password but it only sees the first password that I set with javascript.
<p id="loginuser" style="display: block">Username:
<input type="text" name="text1">
</p>
<p id="loginpass" style="display: block">Password:
<input type="password" name="dasnk2">`
</p>
<input id="login" style="display: block" type="button" value="Log In" name="Submit" onclick="javascript:validate(document.getElementsByName("text1")[0].value,"Harrison",document.getElementsByName("dasnk2")[0].value,"88888888a"); validate(document.getElementsByName("text1")[0].value,"Isaac",document.getElementsByName("dasnk2")[0].value,"Tewst"); validate(document.getElementsByName("text1")[0].value,"Adam",document.getElementsByName("dasnk2")[0].value,"faa222014"); validate(document.getElementsByName("text1")[0].value,"Kelvin",document.getElementsByName("dasnk2")[0].value,"six921six921"); validate(document.getElementsByName("text1")[0].value,"Alap",document.getElementsByName("dasnk2")[0].value,"99999999nine")" >
this is my function for validating to be a bit more clear. (editied)
function validate(text1,dasnk2,text3,text4) {
if (text1 === dasnk2 && text3 === text4) {
var redirect = document.getElementById('redirect');
var embed = document.getElementById("embed");
redirect.style.display = "block";
embed.style.display = "none";
setTimeout(function() {
embed.style.display = "block";
redirect.style.display = "none";
loginuser.style.display = "none";
loginpass.style.display = "none";
login.style.display = "none";
header.style.display = "none";
}, 5000);
} else {
var incorrect = document.getElementById('incorrect');
incorrect.style.display = "block";
setTimeout(function() {
incorrect.style.display = "none";
}, 2000);
}
}

You have multiple onlick events. Each one overwrites the previous one. So in the end the only onclick event that will be called is the last one. If you want to call multiple things inside an inline event handler you need to use semicolons.
onclick="function1(); function2(); function3();"
In your case validate is probably trying to cancel the submission event. You are not cancelling it since there is no return. So it would have to be
onclick="return function1() && function2() && function3();"
Ideally you would not be using inline event handlers, but you would bind the event with addEventListener.
document.getElementById("myForm").addEventListener("submit", function () {
var valid1 = validate(...)
var valid2 = validate(...)
var valid3 = validate(...)
return valid1 && valid2 && valid3;
});

How do I use RegExp to search value of var for specific word

This was my code which it's not working. What I'm trying to accomplish is that if user doesn't type https://www. then automatically add it for them. If user does add https://www. then don't add it for them.
Javascript
var button = document.getElementById('button');
var search = document.getElementById("search");
button.addEventListener("click", function () {
if (search.value !== "https://www.") {
window.open("https://www." + search.value);
} else if (search.value == "https://www.") {
window.open(search.value);
}
})
HTML
<input id="search" type="text" placeholder="URL"
autocomplete="https://www.">
<button id="button">Search</button>

var button = document.getElementById('button');
var search = document.getElementById("search");
var protocol = /^(http(s)?(:\/\/))?(www\.)?/gi;
button.addEventListener("click", function() {
if (!search.value.match(protocol)[0]) {
window.open("https://www." + search.value);
} else if (search.value.match(protocol)[0]) {
window.open(search.value);
}
});
<input id="search" type="text" placeholder="URL" autocomplete="https://www.">
<button id="button">Search</button>

You could probably accomplish this with the indexOf() function.
var searchValue = 'example.com';
if (searchValue.indexOf('https://www') > -1) {
window.open("https://www." + searchValue);
} else {
window.open(searchValue);
}

How do i make the field that shows required in html5 and java script? Below is my code

if you look at the code below I use javascript to show fields when another radio button is clicked. Is there way using html5 and javascript to make those fields that show required.
function yesnoCheckcanwork() {
if (document.getElementById('no_to_work').checked) {
document.getElementById('notoworkexplain').style.display = 'block';
}
else
document.getElementById('notoworkexplain').style.display = 'none';
}
function yesnoCheckcanfelony() {
if (document.getElementById('yes_to_felony').checked) {
document.getElementById('yestofelonyexplain').style.display = 'block';
}
else
document.getElementById('yestofelonyexplain').style.display = 'none';
}
<label>Are you a U.S. citizen or otherwise authorized to work in the U.S. on an unrestricted basis?:</label>
<input type="radio" id="yes_to_work" value="yes_to_work" name="can_work" onclick="javascript:yesnoCheckcanwork();" required="required"><label for="yes_to_work" class="light">Yes</label>
<input type="radio" id="no_to_work" value="no_to_work" name="can_work" onclick="javascript:yesnoCheckcanwork();" required="required"><label for="no_to_work" class="light">No</label>
<div id="notoworkexplain" style="display:none">
<label for="no_to_work_explain">Please explain:</label><textarea id="no_to_work_explain" name="no_to_work_explain"></textarea>
</div>
<label>Have you ever been convicted of a felony?:</label>
<input type="radio" id="yes_to_felony" value="yes_to_felony" name="felony" onclick="javascript:yesnoCheckcanfelony();" required="required"><label for="yes_to_felony" class="light">Yes</label>
<input type="radio" id="no_to_felony" value="no_to_felony" name="felony" onclick="javascript:yesnoCheckcanfelony();" required="required""<label for="no_to_felony" class="light">No</label>
<div id="yestofelonyexplain" style="display:none">
<label for="yes_to_felony_explain">Please provide date of conviction and fully describe the circumstances:</label><textarea id="yes_to_felony_explain" name="yes_to_felony_explain" ></textarea>
</div>

All you need to do is to set the element's required attribute to true or false.
So try this:
function yesnoCheckcanwork() {
if (document.getElementById('no_to_work').checked) {
document.getElementById('notoworkexplain').style.display = 'block';
document.getElementById('no_to_work_explain').required = true;
} else {
document.getElementById('notoworkexplain').style.display = 'none';
document.getElementById('no_to_work_explain').required = false;
}
}
function yesnoCheckcanfelony() {
if (document.getElementById('yes_to_felony').checked) {
document.getElementById('yestofelonyexplain').style.display = 'block';
document.getElementById('yes_to_felony_explain').required = true;
} else {
document.getElementById('yestofelonyexplain').style.display = 'none';
document.getElementById('yes_to_felony_explain').required = false;
}
}
Here is a demo: http://jsfiddle.net/dbhz2nj9/

Hiding multiple form fields using checkboxes

I have this code that I need to edit so I can use it on multiple chkBox's and txtBox's.
Currently I can only hide one input field with one check box.
I know HTML and CSS but I am not familiar with JS.
I would like to be able to add a number at the end of each ID.
chkBox1, chkBox2, chkBox3... txtBox1, txtBox2, txtBox3...
Do I need to change getElementById to getElementsByTagName()?
JSFIDDLE for some reason it does not work here...?
This is my current code which hide the text field unless the checkbox is checked:
function showHide(){
var chkBox = document.getElementById("chkBox");
var txtBox = document.getElementById("txtBox");
if (chkBox.checked){
txtBox.style.visibility = "visible";
} else {
txtBox.style.visibility = "hidden";
}
}

The reason your code wasn't working is because it was running onLoad. Your DOM and the onclick were created before the load was complete. You could just move your code into your <head></head> tags and it will work as is. See here, all I did was select the "No wrap - in head", no code changes.
You could also continue to have your javascript run onLoad and remove your onclick and add an eventlistener in the javascript like this:
JSFiddle
var txtBox = document.getElementById("txtBox");
document.getElementById("chkBox").addEventListener("click", function() {
if (this.checked) {
txtBox.style.visibility = "visible";
} else {
txtBox.style.visibility = "hidden";
}
});
If you have multiple instances of this, I would change your DOM a bit sort of like this:
<form>
<div class="option">
<input type="text" name="txtBox1" class="hiddenInput" />
<br/>
<input type="checkbox" name="chkBox1" id="chkBox1" class="showHideCheck" />
<label for="chkBox1">Click me to show the text box</label>
</div>
<div class="option">
<input type="text" name="txtBox2" class="hiddenInput" />
<br/>
<input type="checkbox" id="chkBox2" name="chkBox2" class="showHideCheck" />
<label for="chkBox2">Click me to show the text box</label>
</div>
</form>
and do your JQuery like this (since you previously tagged jquery):
$(".hiddenInput").hide();
$(".showHideCheck").on("change", function() {
$this = $(this);
$input = $this.parent().find(".hiddenInput");
if($this.is(":checked")) {
$input.show();
} else {
$input.hide();
}
});
JSFiddle
Or with pure javascript and the similar DOM as above:
var checkBoxes = document.getElementsByClassName("showHideCheck");
for (var i = 0; i < checkBoxes.length; i++) {
checkBoxes[i].addEventListener('click', function () {
var txtBox = getAssociatedTextBox(this);
if (this.checked) {
txtBox.style.visibility = "visible";
} else {
txtBox.style.visibility = "hidden";
}
}, false);
}
function getAssociatedTextBox(ele) {
var childNodes = ele.parentNode.childNodes;
for (i = 0, j = childNodes.length; i < j; i++) {
if (childNodes[i].className == "hiddenInput") {
return childNodes[i];
}
}
}
JSFiddle

Try this,
Javascript
$(document).ready(function(){
$("input[type=checkbox]").change(function(){
var oTxt = $("#txtBox" + $(this).attr("id").replace("chkBox", ""));
if($(this).is("checked"))
oTxt.show()
else
oTxt.hide();
});
});
HTML
<input type="checkbox" id="chkBox1"/>
<input type="textbox" id="txtBox1"/>
<input type="checkbox" id="chkBox2"/>
<input type="textbox" id="txtBox2"/>