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.
Related
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;
});
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();
}
}
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';
}
}
}
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>
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/