I'd like to create a page that allow users to create keys in a database. To do that, the user have first to choose between two buttons. Each button display a different form.
My problem is the next one : I can use ONE button that show ONE form. Here is the code from https://stackoverflow.com/a/16196022/12533349 :
HTML:
<button id="some_id">Hide div</button>
<form id="some_form">
<form>
javascript:
<script type="text/javascript">
var theButton = document.getElementById('some_id');
theButton.onclick = function() {
document.getElementById('some_form').style.visibility='hidden';
}
</script>
But what I would like to do is the next thing :
if the user click on button_a, it show form_a, if he clicks on button_b, but the form_a is displayed, the form_a is hidden and the form_b is displayed. I hope it's more or less understandable...
Before concluding this post, I'd like to add a precisition : I use BootStrap 4 to construct my webapp.
You could use something like this for it.
var form1 = document.getElementById('form1');
var form2 = document.getElementById('form2');
// Hide the two forms when the page loads
form2.style.display = "none";
form1.style.display = "none";
// Create a function that shows and hides the forms
function showForm(x){
if(x==1){ /* Check what form should be shown */
form1.style.display = "block";
form2.style.display = "none";
}else if(x==2) {
form1.style.display = "none";
form2.style.display = "block";
}
}
<button onclick="showForm(1)">Form 1</button><button onclick="showForm(2)">Form 2</button>
<form id="form1">
<h3>Form 1</h3>
Example 1: <input placeholder="Example"/>
</form>
<form id="form2">
<h3>Form 2</h3>
Example 2: <input placeholder="Example"/>
</form>
In the code above, I used style.display, but you could also use style.visibility.
You stopped in the middle of the work, you had almost reached the goal. :)
However, returning to us, I think it's more elegant to use a class to add and remove in this way:
let theButton = document.getElementById('btn_id');
let theButton2 = document.getElementById('btn_id_2');
let element = document.getElementById('some_form');
let element2 = document.getElementById('some_form_2');
theButton.onclick = function() {
if(element.classList.contains('hidden')) {
element.classList.remove('hidden');
element2.classList.add('hidden');
}
}
theButton2.onclick = function() {
if(element2.classList.contains('hidden')) {
element2.classList.remove('hidden');
element.classList.add('hidden');
}
}
Remember to write your .hidden class with visibility: hidden
Related
I would like to have a button that, when clicked, hides one element and shows another, and to have the button change text when clicked (I think I got this part). Also, I'd like to only display one of the elements upon loading the page, and when the button is clicked, to only display the other element. The code I am using currently almost accomplishes this correctly, but upon clicking the button, the hidden element is displayed (desired) but the other element that was displayed is not hidden. Here is my code (I am using basic JS, I don't want to use jQuery).
The HTML
<html>
<body>
<div>
<span>E-Mail or Phone<br>
</span>
<button onclick="emph()" id="emphbtn" type="button">Use Phone</button>
</div>
<div id="phbox" style="display: none;">
<label for="phone">Phone</label><input id="phone" type="tel" />
</div>
<div id="embox">
<label for="mail">E-Mail</label><input id="mail">
</div>
</body>
and the javascript
function emph() {
// get the clock
var myPhone = document.getElementById('phbox');
// get the current value of the clock's display property
var displaySetting = myPhone.style.display;
// also get the clock button, so we can change what it says
var switchbtn = document.getElementById('emphbtn');
// now toggle the clock and the button text, depending on current state
if (displaySetting == 'block') {
// clock is visible. hide it
myPhone.style.display = 'none';
// change button text
switchbtn.innerHTML = 'Use Phone';
}
else {
// clock is hidden. show it
myPhone.style.display = 'block';
// change button text
switchbtn.innerHTML = 'Use Email';
}
}
You also need to toggle your email input embox
function emph() {
// get the clock
var myPhone = document.getElementById('phbox');
var myEmail = document.getElementById('embox');
// get the current value of the clock's display property
var displaySetting = myPhone.style.display;
// also get the clock button, so we can change what it says
var switchbtn = document.getElementById('emphbtn');
// now toggle the clock and the button text, depending on current state
if (displaySetting == 'block') {
// clock is visible. hide it
myPhone.style.display = 'none';
myEmail.style.display = 'block';
// change button text
switchbtn.innerHTML = 'Use Phone';
} else {
// clock is hidden. show it
myPhone.style.display = 'block';
myEmail.style.display = 'none';
// change button text
switchbtn.innerHTML = 'Use Email';
}
}
<div>
<span>E-Mail or Phone<br></span>
<button onclick="emph()" id="emphbtn" type="button">Use Phone</button>
</div>
<div id="phbox" style="display: none;">
<label for="phone">Phone</label><input id="phone" type="tel" />
</div>
<div id="embox">
<label for="mail">E-Mail</label><input id="mail">
</div>
I have 4 links. When I click the first link div 1 should be displayed and the other 3 hidden.
When I click link 2, div 2 should be displayed and the other 3 hidden, and so on...
What I did:
With CSS I've set the class of the 4 divs to display: none
Created 4 functions with javascript that set the display property of the correct div to block and the 3 others to none
Call the function when clicking the link
When I click a link, the div is shown for a quarter of a second but then it disappears again
CSS:
.CatDiv {
display:none;
}
JS function:
function showKadoballonnen() {
document.getElementById("Kadoballonnen").style.display = "block"
document.getElementById("Geschenkmanden").style.display = "none"
document.getElementById("Pampercadeaus").style.display = "none"
document.getElementById("OrigineleVerpakkingen").style.display = "none";
}
Calling the function:
Kadoballonnen
Div that has to be called:
<div id="Kadoballonnen" class="CatDiv">TEST</div>
function showKadoballonnen(e) {
e.preventdefault();
document.getElementById("Kadoballonnen").style.display = "block";
document.getElementById("Geschenkmanden").style.display = "none";
document.getElementById("Pampercadeaus").style.display = "none";
document.getElementById("OrigineleVerpakkingen").style.display = "none";
}
.CatDiv {
display: none;
}
Kadoballonnen
<div id="Kadoballonnen" class="CatDiv">TEST</div>
<div id="Geschenkmanden" class="CatDiv">TEST</div>
<div id="Pampercadeaus" class="CatDiv">TEST</div>
<div id="OrigineleVerpakkingen" class="CatDiv">TEST</div>
What am I missing?
All is easier than you think. In your tag you got "href" with empty parameter. It makes your page reloading while pressing on it.
So all you should do is to write "#" as a parameter.
Kadoballonnen
You should avoid empty href attribute on a link. Use a button instead.
If it still does not work, attach your method to window object. Also, I don't recommend this approach, you should handle it in your Javascript by targetting at your DOM elements using an ID for example and adding your event listener from here.
document.getElementById('myelement').addEventListener('click', showKadoBallonnen);
You have a few errors in your code, and you also need to stop your link (<a>) firing.
On your link, add return false;:
Kadoballonnen
<!-- ^ Also, add href="#" so you don't have an empty href -->
Also, add semicolons to the end of each line of your javascript:
document.getElementById("Kadoballonnen").style.display = "block";
document.getElementById("Geschenkmanden").style.display = "none";
document.getElementById("Pampercadeaus").style.display = "none";
document.getElementById("OrigineleVerpakkingen").style.display = "none";
I was running into this problem while writing some coffeescript in a rails application. Another answer helped me.
The solution is the event.preventDefault() as shown below:
app/views/posts/index.html.erb:
<%= link_to "Some link", '#', id: 'some-link' %>
<div class="some-div">
<h4>Some list</h4>
<ul id='some-list'>
<li>cats</li>
<li>and</li>
<li>dogs</li>
</ul>
</div>
app/assets/javascripts/posts.coffee:
$(document).on 'turbolinks:load', ->
$('#some-link').click (event) ->
event.preventDefault()
$('#some-list').toggle()
I managed to make it working: https://jsfiddle.net/ke81koj6/
function showKadoBallonnen() {
document.getElementById("one").style.display = "block";
document.getElementById("two").style.display = "none";
document.getElementById("three").style.display = "none";
document.getElementById("four").style.display = "none";
}
EDIT
Edited the fiddle and now works with the press on a button. It's better to use a button than an anchor with a empty href.
HTML:
<button id="button" onclick="showKadoBallonnen()">click here</button>
JS:
document.getElementById("button").onclick = showKadoBallonnen;
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;
};
function tab_menu(){
if (buttonObject.value == value){
document.getElementById("div1").style.display = "block";
}
}
i was trying when click to buttons check Button Value and show a div based on Button's Value and hide others divs it should show just one div at same time. I wonder there is a javascript Master who can solve this problem.
SCRIPT:
function tabmenu(buttonObject){
var value = buttonObject.value
var target = document.getElementById(value);
if(target) {
var siblings = target.parentNode.getElementsByTagName("DIV");
for(i=0;i<siblings.length;i++){
siblings[i].style.display = "none";
}
target.style.display = "block";
}
}
HTML:
<div>
<div id="tab1">Tab1</div>
<div id="tab2">Tab2</div>
<div id="tab3">Tab3</div>
</div>
<button onclick="tabmenu(this);" value="tab1">Tab1</button>
<button onclick="tabmenu(this);" value="tab2">Tab2</button>
find the tab to activate (assuming value = tab.id)
find the parent and hence it's siblings (assuming they are DIVs)
hide the siblings
show the target
You can see it working here: http://jsfiddle.net/4rWdQ/
Is there a way that I can have an image replace a checkbox, and when someone clicks on it, it selects it, and changes the image to another image like a "checked" image?
So essentially:
[heart-icon] Health and Fitness
user clicks on it
[check-icon] Health and Fitness
and now that area is selected
There are definitely scripts/plugins available to do this. I've not used any of them so I can't recommend one specifically, but here's an example:
http://www.itsalif.info/content/ezmark-jquery-checkbox-radiobutton-plugin
I would try this plugin: SimpleImageCheck
http://www.jkdesign.org/imagecheck/
Code to customize the checkbox looks simple:
$('#checkbox').simpleImageCheck({
image: 'unchecked.png',
imageChecked: 'check.png'
afterCheck: function(isChecked) {
if (isChecked) {
// do something
}
}
});
No need of plugins nor JQuery:
<span onclick="changeCheck(this)">
<img src="http://www.clker.com/cliparts/e/q/p/N/s/G/checkbox-unchecked-md.png">
<img src="http://www.clker.com/cliparts/4/h/F/B/m/4/nxt-checkbox-checked-ok-md.png">
<input type="checkbox" name="chk">
</span>
<script>
function changeCheck(target)
{
chk = target.lastElementChild;
chk.checked = !chk.checked;
target.children[+ chk.checked].style.display = '';
target.children[1 - (+ chk.checked)].style.display = 'none';
}
function initCheck()
{
chk = document.getElementsByName('chk')[0];
chk.style.display = 'none';
chk.parentNode.children[1 - (+ chk.checked)].style.display = 'none';
}
initCheck();
</script>