Toggle between two hidden forms wrapped in <div> elements with Javascript - javascript

Hoping to find some help!
I've created an HTML Drop down select menu with two options: two different forms that I've included in my HTML wrapped in elements that are not displayed using CSS.
I've coded Javascript to try and toggle between the two forms upon clicking the appropriate option on the menu and then clicking go. However, I cannot figure it out. Here is a snippet of my code.
function myFunction() {
var x = document.getElementById("userForm");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<form>
<div class="dropDown">
<select id="select" onclick="myFunction()">
<option disabled selected>Choose to fill out help form or general feedback form please.</option>
<option id="user">User Feedback Form</option>
<option id="help">User Help Form</option>
<input type="button" value="Go" onclick="go()">
</select>
</div>
</form>
<div id="userForm">A</div>
<div id="helpForm">B</div>
After this script, I go on to include both forms individually wrapped in elements with unique ID's. Please help!
I've tried the original Javascript I wrote above. Only one form will show up. I've also tried to code an If, else, and elif but I am new to Javascript. My Professor told me to search online for answers which seems wrong but I've been experimenting for hours with no success.

As it seems on this snippet you are just toggling the userForm to be seen or not, but you are not doing anything with the help one.
Other than that there are other things that are wrong, you are toggling theyr visibility checking if userForm has display: none or not, but this should be done based on what option is selected.
The javascript code for this should be:
<script>
function myFunction() {
var x = document.getElementById("userForm");
var y = document.getElementById("helpForm");
if (selected option is "user") { //You can easily figure out how to properly write it
x.style.display = "block";
y.style.display = "none";
} else if (selected option is "help") { //This one too
x.style.display = "none";
y.style.display = "block";
}
}
</script>
Another way to improve it is by using classes to hide/show elements instead of x.style.display but for now it is just fine! :)
Let me know if this was of any help

Related

Why does my JS function only manipulate one <div> that is assigned to the class instead of all?

I have this JS function that is supposed to initially hide a that has the class name "tw" and when clicked on a button it should make it visible. However, whenever I click the button it only changes the visibility of one div. I have 4. How can I fix this?
function myFunction(){
var elms = document.getElementsByClassName("tw");
Array.from(elms).forEach((x) => {
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
})
}
https://jsfiddle.net/qm8bxryh/307/
Here's the fiddle
I copied your code into the context of a very simple page (see below) and it seems to work...I might have missed something, but could the issue be elsewhere in your project? Perhaps investigating it piece by piece in the browser console could help.
<!DOCTYPE html>
<html>
<script>
function myFunction(){
var elms = document.getElementsByClassName("tw");
Array.from(elms).forEach((x) => {
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
})
}
</script>
<body>
<button onclick="myFunction()">Click me</button>
<div class="tw">1</div>
<div class="tw" style="display: block;">2</div>
<div class="tw">3</div>
<div class="tw" style="display: block;">4</div>
</body>
</html>
There is no display value set as default, so when you try to access it on an element where you never used display in css or style it returns undefined or nothing
Thats why on the first button click nothing happens if no element has any display, then due to your function all of them get through the else display: block and on the second click the all toggle
What i like to do is creating a class like displayNone
so in css:
.displayNone{
display:none;
}
then whenever you wanna make an element invisible give it this class and then when you click the button just remove the class and all elements become visible
so like this in your function:
function myFunction() {
var elms = document.getElementsByClassName("tw");
console.log(elms);
console.log(Array.from(elms));
Array.from(elms).forEach((x) => x.classList.remove('displayNone')); // just remove the class
}
alternatively you can also use the classList.toggle('displayNone) so it switches between display none and its inital display
I would keep styling in the CSS realm and toggle a class in JS to display the element. Also when you return a nodeList using querySelectorAll() it is in array form already.
Add a css class to the CSS:
.display {
display: block;
}
Then your JS function could be a lot more streamlined with toggle()
let elms = document.querySelectorAll(".tw");
function myFunction() {
elms.forEach(el => el.classList.toggle('display'))
}
JSFiddle

NWJS JS script not functioning right

Im using JS to make divs display as block or none onclick of certain inputs. When i only have it working for one input the scripts work find, but as soon as i impliment the code for the second input it glitches out and both buttons open up the div thats only supposed to work for the second button.
Some of my code:
<span name="FaviconSPAN" id="FaviconSPAN" class="FaviconSPAN" OnClick="showOrHide()">
<img src="ASSETS/IMAGES/FAVICON1.png" alt="FAVICON" name="FaviconPNG" id="FaviconPNG" class="FaviconPNG" />
</span>
<div name="SoftMenuWrapper1" id="SoftMenuWrapper1" class="SoftMenuWrapper1">
<input type="button" value="Favorites" name="SoftMenuInput1" id="SoftMenuInput1" class="SoftMenuInput1" ONCLICK="ShowAndHide()" />
<div name="SoftMenuContent1" id="SoftMenuContent1" class="SoftMenuContent1">
Link 1
Link 1
Link 1
</div>
</div>
<script type="text/javascript">
var faqPage = document.getElementById('SoftMenuContent1');
function showDiv() {
faqPage.style.display = "block";
}
function closeDiv() {
faqPage.style.display = "none";
}
function showOrHide() {
if (faqPage.style.display === "block") {
closeDiv()
}
else {
showDiv()
}
}
</script>
<SCRIPT>
function ShowAndHide() {
var x = document.getElementById('SectionName');
if (x.style.display == 'none') {
x.style.display = 'block';
} else {
x.style.display = 'none';
}
}
</SCRIPT>
First off the markup looks kinda messy. You don't need to add an ID, name, and class to everything. Only add those things if you need them.
name is rarely used, it's a way to connect to HTML elements. Like connected radio dials. You probably don't need this at all in this code.
class this should only be used if you need to add a specific CSS classname to adjust the styles. If you are not doing that, don't include it.
id should be assigned to a unique value that only occurs once on the page. it can be used to auto-scroll to that position of the page if the url contains #whatever and that matches an element with id="whatever". Though it is more commonly used just to target a specific element in your JavaScript. If you aren't doing either of those things, don't add it.
Another problem you have is order of execution. You can either define your JS first (<script> at the top) and then reference the functions with onclick in the HTML, or (more commonly), define your HTML first with ID's, then have your <script> at the bottom targeting the IDs (document.getElementById('asdf')).
Here is a cleaner version of your code.
<span id="faviconContainer">
<img src="assets/images/favicon1.png" alt="Image of an icon" />
</span>
<div>
<input type="button" value="Favorites" id="softMenuInput" />
<div id="faqPage">
Link 1
Link 2
Link 3
</div>
</div>
<script type="text/javascript">
/**
* Takes in an ID to find an element on the page, then shows/hides it.
*
* #param {string} id The element's ID
*/
function toggle (id) {
var el = document.getElementById(id);
if (el.style.display === 'block') {
el.style.display = 'none';
} else {
el.style.display = 'block';
}
}
var faviconContainer = document.getElementById('faviconContainer');
var softMenuInput = document.getElementById('softMenuInput');
faviconContainer.addEventListener('click', function () {
toggle('faqPage');
});
softMenuInput.addEventListener('click', function () {
toggle('sectionName');
});
</script>
This question isn't related to NW.js at all. It's just basic HTML and JavaScript.
I recommend you follow these resources to improve your skills. You can also rely on the world's largest programming community (HTML/JS) to ask these questions. Then when you have NW.js specific things, you can ask those here.
https://marksheet.io - HTML/CSS/Sass
https://freeCodeCamp.org - JavaScript

Javascript - show hidden div if 'checked' is present on a div element (not a checkbox element)

I have something that is likely simple, but I'm struggling :/
I am trying to show a hidden div if the parent element is 'checked' (it is not a checkbox, but we're adding checked to the div if it's clicked on). Here's a screenshot of what the checked looks like in my local environment (screenshot attached).
Here's the code with the div 'checked' and I suspect this should make the hidden div show, but it is not.
Here's the guide I'm following, and the code example below: https://www.w3schools.com/howto/howto_js_display_checkbox_text.asp
var checkBox = document.getElementById("accordionButton");
// Get the output text
var text = document.getElementById("accordionContent");
// If the element is checked, display the accordion content
if (checkBox.checked == true){
text.style.display = "block";
} else {
text.style.display = "none";
}
<body>
<div id="accordionButton" checked> <!-- here is where when check is true, I want to show accordion content -->
<p>
<span>Migrate from another platform</span>
</p>
<div id="accordionContent">
option 1 option 2 option 3 option 4
</div>
</div>
</body>
Thank you all for your input. I tried various combinations from your feedback, but they didn't have the effect I was looking for.
Here's what I ultimately ended up with. If there's a better way to write this please let me know. This works in the live environment where the checkbox attribute can be toggled.
I appreciate your help!
document.body.addEventListener('click', function(e){
var button = document.getElementById("accordionButton"); // Get the clickable div
var text = document.getElementById("accordionContent"); // Get the hidden div
// If the checkbox is checked, display the output text
if (button.getAttribute("checked") === null) {
text.style.display = "none";
} else {
text.style.display = "block";
}
});
#accordionContent {
display: none;
}
<div id="accordionButton" checked>
<p>
<span>Migrate from another platform</span>
</p>
<div id="accordionContent">
option 1 option 2 option 3 option 4
</div>
</div>

A toggle function for different buttons

I'd like to make two different buttons in vanilla JavaScript that, when clicked one after the other, display a different text message.
Any advice in reorganising the code below? Thanks.
I could find a toggle function for one button but not for different buttons.
index.html
<button onclick="revealMessageUk()"><li><img class="flag-pictures" src="images/uk.svg" id="1"/></li></button>
<button onclick="revealMessageSpain()"><li><img class="flag-pictures" src="images/spain.svg" id="3"/></li></button>
<p id="hiddenMessageUk" style="display:none">Hello!</p>
<p id="hiddenMessageSpain" style="display:none">¡Hola!</p>
index.js
function revealMessageUk() {
document.getElementById('hiddenMessageUk').style.display = 'block';
}
function revealMessageSpain() {
document.getElementById('hiddenMessageSpain').style.display = 'block';
}
I'd like to not only display like hereafter but have a sort of a toggle function (hide/show or add/remove feature) for the two foreign languages below.
try
function revealMessage(msg) {
hiddenMessage.style.display='block';
hiddenMessage.innerText=msg;
}
<button onclick="revealMessage('Hello!')"><li><img class="flag-pictures" src="images/uk.svg" id="1" alt='UK'/></li></button>
<button onclick="revealMessage('¡Hola!')"><li><img class="flag-pictures" src="images/spain.svg" id="3" alt='ES'/></li></button>
<p id="hiddenMessage" style="display:none"></p>
Here is a way to toggle, but also keep it flexible when more locales will be added. You keep a sort of a selectedLocaleId "state" and change it when one of the buttons is clicked with the corresponding locale id.
let selectedLocaleId;
function selectLocale(newSelectedLocaleId) {
// If there is a selected locale id, un-select it
if (selectedLocaleId) {
document.getElementById(selectedLocaleId).style.display = 'none';
}
// set the new selected locale id
selectedLocaleId = newSelectedLocaleId;
document.getElementById(selectedLocaleId).style.display = 'block';
}
<button onclick="selectLocale('hiddenMessageUk')"><li><img class="flag-pictures" src="images/uk.svg" id="1"/></li></button>
<button onclick="selectLocale('hiddenMessageSpain')"><li><img class="flag-pictures" src="images/spain.svg" id="3"/></li></button>
<p id="hiddenMessageUk" style="display:none">Hello!</p>
<p id="hiddenMessageSpain" style="display:none">¡Hola!</p>
Hope this helps :)
Cheers

Show/Hide onClick button not working

Hey guys I have searched for many answers and none of them seem to be working so I am going to put my code here and hopefully you can help me figure this out.
I am going to have two buttons. The first button (show_Chappie) is going to show the hidden contents and another button (hide_Chappie) and hides it self when clicked.
The second button (hide_chappie) is going to hide the contents and bring back the first button (show_chappie). The hide_chappie button itself would also be hidden.
The information div is already hidden from the start. I did this on the CSS using the display:none;
Here's my HTML code so far:
<button class ="show_chappie" onclick="showInfo()">Show More</button>
<div class="info">Info here.</div>
<button class ="hide_chappie" onclick="hideInfo()">Show Less</button>
Here's my JavaScript code so far:
function showInfo(){
document.getElementById('chappie_info').style.display = "inline-block";
document.getElementById('show_chappie').style.display = "none";
document.getElementById('hide_chappie').style.display = "inline-block";
}
I haven't written the code for the hide_chappie button because I wanted to see this working first.
So where have I gone wrong here? Thanks for the help in advance.
You are trying to get the elements by id while they have a class, you should change the elements class to id like this:
<button id="show_chappie" onclick="showInfo()">Show More</button>
<div id="info">Info here.</div>
<button id="hide_chappie" onclick="hideInfo()">Show Less</button>
you should change your code to:
<button id ="show_chappie" onclick="showInfo()" >Show More</button>
<div class="info">Info here.</div>
<button id= "hide_chappie" onclick="showInfo()">Show Less</button>
if you want to use class here,you should change your Javascript Code to
function showInfo(){
document.getElementByClass('chappie_info')[0].style.display = "inline-block";
document.getElementByClass('show_chappie')[0].style.display = "none";
document.getElementByClass('hide_chappie')[0].style.display = "inline-block";
}
because function getElementsByClass returns a collection,so you should add [] to find out the result you want!
It's kind of annoying to turn all id's into classes, you can use:
function showInfo(){
document.getElementsByClassName('chappie_info').style.display = "inline-block";
document.getElementsByClassName('show_chappie').style.display = "none";
document.getElementsByClassName('hide_chappie').style.display = "inline-block";
}
This is supported by practically every browser these days so I wouldn't worry about that. If that is still an issue an you need to support ancient browsers, use this:
document.getElementsByClassName = function (a) {
var b = document.getElementsByTagName('*'), i, c=[];
for (i = 0; i < b.length; i += 1) { b[i].getAttribute('class')===a&&c.push(b[i]); }
return c;
};

Categories