i got a container with 3 radionbuttons and 2 of the radiobuttons have another radiobuttons next to them but their displays are none . When i click the radiobutton i wanna display the hidden radiobuttons and when i click another radionbutton i want it's display to be none again .
`function showHiddenText()
{
if (document.getElementById("diger").checked) {
const hiddenInput = document.getElementById("hidden-input");
hiddenInput.style.display = "block";
} else if (document.getElementById("diger").checked == false) {
hiddenInput.style.display = "none";
}
}`
It's a simple function i write to do that but else if part is not working . When i display hidden radio buttons they dont disappear ever again.
radionbuttons
hiddenpart
const variables are block scoped. So, in the else if statement hiddenInput is undefined.
Move it above the statements
function showHiddenText()
{
const hiddenInput = document.getElementById("hidden-input");
if (document.getElementById("diger").checked) {
hiddenInput.style.display = "block";
} else if (document.getElementById("diger").checked == false) {
hiddenInput.style.display = "none";
}
}
By the way, you can make it simpler by replacing the else if statement with else:
function showHiddenText()
{
const hiddenInput = document.getElementById("hidden-input");
if (document.getElementById("diger").checked) {
hiddenInput.style.display = "block";
} else {
hiddenInput.style.display = "none";
}
}
Or even more:
function showHiddenText()
{
const hiddenInput = document.getElementById("hidden-input");
if (document.getElementById("diger").checked) {
hiddenInput.style.display = "block";
return true; // you can return anything here
}
hiddenInput.style.display = "none";
return false; // and here (it is not necessary to return here)
}
Make sure your radio buttons have the same name.
Radio buttons with same name are compared to each other.
Add onclick="showHiddenText()" to inputs, then:
html:
<input type="radio" name="btn" id="diger" onclick="showHiddenText()">
<input type="radio" name="btn" onclick="showHiddenText()">
<input type="radio" id="hidden-input">
js:
function showHiddenText() {
if (document.getElementById("diger").checked) {
document.getElementById("hidden-input").style.display = 'block'
}
else{
document.getElementById("hidden-input").style.display = 'none'
}
}
Related
I am making a password app where you first create a password and save it to a variable. Once the variable has the value, you can enter the password. If the user got it wrong three times, I want to hide the input box and show a message. So far it is working, but it doesn't compare the two variables. Here is my code:
<p id='password'></p>
<input type='password' title='enter your password'>
<input type="submit" onclick='passwords__()'>
<button onclick='savePassword()'>
Save Your New Password
</button>
<script>
var times = 0;
var input = document.getElementsByTagName('input')[0];
var passwords = document.getElementsByTagName('input')[0].value;
var buttons = document.getElementsByTagName('input')[1];
var buttons2 = document.getElementsByTagName('button')[0];
function passwords__() {
times++;
if (times === 3) {
input.style.display = 'none';
document.getElementById('password').innerHTML = 'You can\'t enter your password because you have not enter the right one for three times';
}
if (input.value === passwords) {
alert('You\'re loged in');
}
}
</script>
<script>
function firstCall() {
buttons.style.display = 'none';
}
firstCall();
</script>
<script>
function savePassword() {
buttons.style.display = 'block';
buttons2.style.display = 'none';
}
</script>
When you set var passwords = document.getElementsByTagName('input')[0].value you set password to the value when the page is loaded and not when the save password button is loaded.
You should
put the savePassword function in the same block where you defined the passwords variable
set the value of passwords in the savePassword method.
Your line
var passwords = document.getElementsByTagName('input')[0].value;
is probably running before the button is pressed, so the value isn't being retrieved when the button is pressed - move this line into your passwords__() function.
Also, use
window.onload = function() {
}
to ensure that the document.getElementsByTagName() is running after the function is fully loaded;
window.onload = function() {
var times = 0;
var input = document.getElementsByTagName('input')[0];
var buttons = document.getElementsByTagName('input')[1];
var buttons2 = document.getElementsByTagName('button')[0];
}
function passwords__() {
times++;
let passwords = document.getElementsByTagName('input')[0].value;
if (times === 3) {
input.style.display = 'none';
document.getElementById('password').innerHTML = 'You can\'t enter your password because you have not enter the right one for three times';
}
if (input.value === passwords) {
alert('You\'re logged in');
}
}
Side note: You have a typo in alert('You're loged in'); (loged -> logged)
what you were missing
you were comparing the second input to an empty string because you are running it before the event of clicking
there are some things you can improve here .
password disappears after save
times count to 0 when logged in
var times = 0;
var input = document.getElementsByTagName('input')[0];
var pass1;
var button = document.getElementsByTagName('input')[1];
var buttons2 = document.getElementsByTagName('button')[0];
function passwords__(){
times++;
pass2 = input.value;
if(times === 3 && pass2 !== pass1){
input.style.display = 'none';
document.getElementById('password').innerHTML = 'You can\'t enter your password because you have not enter the right one for three times';
}
console.log(pass1)
if(pass2 == pass1){
alert('You\'re loged in');
times = 0 ;
}
}
function firstCall(){
button.style.display = 'none';
}
firstCall();
function savePassword(){
pass1 = input.value;
input.value = '';
button.style.display = 'block';
buttons2.style.display = 'none';
}
<p id='password'>
</p>
<input type='password' title='enter your password'>
<input type="submit" onclick='passwords__()'>
<button onclick='savePassword()'>
Save Your New Password
</button>
I'm trying to have a div have the exact same content as an input. If I type "lalala" in the input, I want it to show in the div. That part is working fine. But I would also like to show in the div something along the lines of "the input is empty" when the input, is empty.
So basically like
input = blablabla
div = blablabla
input =
div = The input is empty
I'm trying to make it "if empty, do this, if not, show the same content as the input". But for some reason, the empty bit is not working.
const textInput = $('#input');
const textOutput = $('#output');
if ( textInput.value == "" ) {
textOutput.innerHTML += 'It's empty';
} else {
textInput.on("input", function() {
textOutput.text($(this).val());
});
}
});```
You have an unescaped quotation here 'It's empty'.
There's no reason to use innerHTML
You should use === to compare equality.
const input = document.querySelector('#input');
const output = document.querySelector('#output');
input.addEventListener('input', () =>
output.textContent = input.value ? input.value : "It's empty.");
<input id="input">
<div id="output"></div>
Apart from the apostrophe ' in your string you are mixing Vanilla Javascript with JQuery and your trigger is inside the if() block which is supposed to be called on the trigger.
Change the code like this:
const textInput = $('#input');
const textOutput = $('#output');
textInput.on("input", function() {
if ( $(this).val() === "" ) {
textOutput.html('It\'s empty');
} else {
textOutput.html($(this).val());
}
});
Step by step instruction on what needs changing
As you are using jQuery:
textInput.value == "" should be ! textInput.val()
textOutput.innerHTML = 'it's empty' should be textOutput.text("it's empty");
textOutput.text($(this).val()); should be textOutput.text(textInput.val());
and it should all be within the on "input" listener i.e.
textInput.on('change',function(){ /*code goes here*/ });
fix if
if ( textInput.value == "" ) {
textOutput.innerHTML += 'It\'s empty';
} else {
textInput.on("input", function() {
textOutput.text($(this).val());
});
}
Better if:
if (!textInput.value) {
textOutput.innerHTML = 'It\'s empty';
} else {
textInput.on("input", () => textOutput.text($(this).val()));
}
Short:
!textInput.value ? textOutput.innerHTML = 'It\'s empty' : textInput.on("input", () => textOutput.text($(this).val()));
There ya go
const $textInput = $('#input');
const $textOutput = $('#output');
$textInput.on('input', function(){
if($textInput.val() != '') {
$textOutput.text($textInput.val());
}
else {
$textOutput.text('It\'s empty');
}
});
I'm trying to have a case in a switch statement that jumps into a different switch statement.
In practice, I want the user to type "close page" in a text box and, before the browser closes the page, I want the user to be asked if he is sure about it. Typing "yes" will close the page, and typing "no" will go back to the previous switch statement.
I need to use a switch statement because there are many other things the user can type into the textbox, which generate different feedback.
I used a different textbox for each switch statement, swapping them when necessary, to try to be able to call both functions with the same key.
This is what I have. But it does not work...
Any help?
function SwapDivs(div1, div2) {
d1 = document.getElementById(div1);
d2 = document.getElementById(div2);
if (d2.style.display == "none") {
d1.style.display = "none";
d2.style.display = "block";
} else {
d1.style.display = "block";
d2.style.display = "none";
}
}
function myFunction01() {
var text;
var answers = document.getElementById("myInput01"").value;
switch (answers) {
case "close page":
text = "are you sure?";
SwapDivs('div01', 'div02');
break;
default:
text = "no valid input";
}
document.getElementById("feedback").innerHTML = text;
}
function myFunction02() {
var text;
var answers = document.getElementById("myInput02").value;
switch (answers) {
case "yes":
text = "Why?";
break;
case "no":
text = "Good!";
break;
default:
text = "no valid input";
}
document.getElementById("feedback").innerHTML = text;
}
<p id="feedback"></p>
<div id="div01" style="display:block">
<input id="myInput01" type="text" placeholder="This is TextBox 01." onKeyDown="if(event.keyCode==13) myFunction01();">
</div>
<div id="div02" style="display:none">
<input id="myInput02" type="text" placeholder="This is TextBox 02." onKeyDown="if(event.keyCode==13) myFunction02();">
</div>
You have an extra quote on your first function:
var answers = document.getElementById("myInput01"").value;
It should be:
var answers = document.getElementById("myInput01").value;
I understand the behaviour is:
If user enters any text other than "close page", we give them feedback of invalid input.
If user enters "close page", we ask them if they are sure and change to input 2.
On input 2, if they input yes we say why, if they input no we say good else say no valid input.
If this is expected, the code works for me.
You can run this one below (converted to ES6):
const SwapDivs = (div1, div2) => {
const d1 = document.getElementById(div1);
const d2 = document.getElementById(div2);
if (d2.style.display == "none") {
d1.style.display = "none";
d2.style.display = "block";
} else {
d1.style.display = "block";
d2.style.display = "none";
}
};
const myFunction01 = () => {
let text;
const answers = document.getElementById("myInput01").value;
switch (answers) {
case "close page":
text = "are you sure?";
SwapDivs('div01', 'div02');
break;
default:
text = "no valid input";
}
document.getElementById("feedback").innerHTML = text;
};
const myFunction02 = () => {
let text;
const answers = document.getElementById("myInput02").value;
switch (answers) {
case "yes":
text = "Why?";
break;
case "no":
text = "Good!";
break;
default:
text = "no valid input";
}
document.getElementById("feedback").innerHTML = text;
};
<p id="feedback"></p>
<div id="div01" style="display:block">
<input id="myInput01" type="text" placeholder="This is TextBox 01." onKeyDown="if(event.keyCode==13) myFunction01();">
</div>
<div id="div02" style="display:none">
<input id="myInput02" type="text" placeholder="This is TextBox 02." onKeyDown="if(event.keyCode==13) myFunction02();">
</div>
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';
}
}
}
I have two functions; one that validates the form, the other executes some code if the first function returns true.
<form name="calculator" method="POST" onsubmit="return checkForm(); result(trueOrFalse);" onreset="clearForm()">
The checkForm() function is defined as follows:
function checkForm() {
var valid = true;
var radios1 = document.getElementsByName("item");
var radios2 = document.getElementsByName("postage");
if (document.getElementById("constituency").value == 0) {
document.getElementById("constituency").style.border = "1px solid #a60f28";
document.getElementById("constituency").style.borderRadius = "2.5px";
document.getElementById("conWarning").style.display = "block";
valid = false;
}
//similar code as above for other fields
trueOrFalse = valid;
return valid;
}
The result(valid) function is defined as:
function result(valid) { //use trueOrFalse as parameter
if (valid == true) {
document.getElementById("result").style.display = "none";
document.getElementById("result").innerHTML = "Yay"; //test display value
document.getElementById("result").style.display = "inline";
}
else {
document.getElementById("result").style.display = "none";
document.getElementById("result").innerHTML = "0";
document.getElementById("result").style.display = "inline";
}
return valid;
}
The goal here is to check first if the form filled out by the user is valid; if it is then produce a value to show to the user in the HTML as follows:
<div id="pound">£ <div id="result">0</div></div>
I'm not sure if the way I'm calling my two functions is correct/legal or if it is, whether the value to be display by the result(valid) function has been written correctly. The form is supposed to act as a calculator.
Instead of:
trueOrFalse = valid;
return valid;
Try this:
return result(valid);
Then remove result(trueOrFalse); from your onsubmit.