I have this javascript function that allows me to hide and display after clicking on a button. each button has a div linked to it. when i click on a button the previous button contain is hidden and the second button displays his contains. i woulk like to use a select instead to do the same job. i'm stuck there. Please help me to reach my goal i post the way i did it with button. Bear with me.
function visibilite(id) {
var divs = document.getElementsByTagName('div');
for(var no=0;no<divs.length;no++){
if(divs[ no].className=='divs')
{
'divs'
divs[ no].style.display = "none";
}
}
document.getElementById(id).style.display = "block";
<a href="javascript:visibilite('test1');" class="btn btn-primary btn-sm">
1 year
</a>
<a href="javascript:visibilite('test2');"class="btn btn-primary btn-sm">
2 year
</a>
<div id="test1" class="divs" style="display:yes">
sfssdfsdfsfsf
</div>
<div id="test2" class="divs" style="display:none">
sfssdfsdfsfsf
</div>
Working fiddle.
You can use onchange in select tag, check the following example.
NOTE : in display:yes yes is not a valide value for display attribute.
Hope this helps.
function visibilite(_this)
{
var id = _this.value;
var divs = document.getElementsByTagName('div');
for(var i=0;i<divs.length;i++){
if(divs[i].className=='divs')
{
divs[i].style.display = "none";
}
}
document.getElementById(id).style.display = "block";
}
<select onchange='visibilite(this)'>
<option value='test1'>1 year</option>
<option value='test2'>2 year</option>
</select>
<div id="test1" class="divs">First year content</div>
<br>
<div id="test2" class="divs" style="display:none">Second year content</div>
Related
I have multiple divs in my HTML with sample class name and I want these divs to behave like a radio button, that is when a div is clicked / selected, I want to achieve following.
1: Change the selected div background color
2: Get values from different elements those are inside the selected div and save the values in variables.
I am able to change the color but I am not able to get the unique values from inside the selected div.
Here is the HTML
<div class="col-lg-4 text-center">
<div class="package">
<input type="hidden" class="packageId" value="5" />
<p class="small">Deep</p>
<h4 class="packageTitle">Deep Cleaning</h4>
<p>All-inclusive cleaning service</p>
<p class="small">Price Per Cleaner</p>
<p class="price packagePrice">41.90 <span class="small">/h</span></p>
</div>
</div>
<div class="col-lg-4 text-center">
<div class="package">
<input type="hidden" class="packageId" value="4" />
<p class="small">Last Minute</p>
<h4 class="packageTitle">Last-Minute Cleaning</h4>
<p>Last minute & after party cleaning</p>
<p class="small">Price Per Cleaner</p>
<p class="price packagePrice">43.90 <span class="small">/h</span></p>
</div>
</div>
<div class="col-lg-4 text-center">
<div class="package">
<input type="hidden" class="packageId" value="3" />
<p class="small">Moving</p>
<h4 class="packageTitle">Move-In-Out Cleaning</h4>
<p>For move-ins, and move-outs</p>
<p class="small">Price Per Cleaner</p>
<p class="price packagePrice">41.90 <span class="small">/h</span></p>
</div>
</div>
And here the the Script
var packageId = "";
var packageTitle = "";
var packagePrice = "";
var packages = document.getElementsByClassName('package');
Array.prototype.forEach.call(packages, function (element) {
element.addEventListener('click', function () {
$('.package').css("background-color", "#FFFFFF");
$(this).css("background-color", "#FCF6CC");
packageId = $('.packageId').attr('value');
packageTitle = $('.packageTitle').text();
packagePrice = $('packagePrice').text();
console.log(packageId);
console.log(packageTitle);
console.log(packagePrice);
});
});
The reason that youre not getiing the unique value is because you are using get element by class ,
ie packagePrice = $('.packagePrice').text();
and there are 3 elements with same class name , to fix this issue
const elem = $(this);
packagePrice = elem.find('.packagePrice').text();
I am trying to create a TO DO List application. In this application when I click submit button of the formlayer, a new eventcard with all the data should be appended in the events div.
function reveal() {
document.getElementById("layer1").style.display = "block";
document.getElementById("formlayer").style.display = "block";
}
function hide() {
document.getElementById("layer1").style.display = "none";
document.getElementById("formlayer").style.display = "none";
}
function addEvent() {
document.getElementById("layer1").style.display = "none";
document.getElementById("formlayer").style.display = "none";
let title = document.getElementById("ftitle").value;
let time = document.getElementById("ftime").value;
let desc = document.getElementById("fdesc").value;
// this will create the card
let card = document.createElement("div");
card.classList.add("eventcard");
//title div
let cardtitle = document.createElement("div");
cardtitle.classList.add("eventtitle");
cardtitle.innerHTML = title;
card.appendChild(cardtitle);
//time div
let cardtime = document.createElement("div");
cardtime.classList.add("eventtime");
cardtime.innerHTML = time;
card.appendChild(cardtime);
//desc div
let carddesc = document.createElement("div");
carddesc.classList.add("eventdesc");
carddesc.innerHTML = desc;
card.appendChild(carddesc);
// del button
let cardbtn = document.createElement("button");
cardbtn.classList.add("delete");
cardbtn.innerHTML = "Delete";
card.appendChild(cardbtn);
// adding card to events
document.getElementById("events").appendChild(card);
}
<div id="container">
<div id="title">To Do List</div>
<div id="events">
<div class="eventcard">
<div class="eventtitle">Meeting</div>
<div class="eventtime">10:00 AM</div>
<div class="eventdesc">The meeting regarding the discussion of company sales</div>
<button class="delete">Delete</button>
</div>
</div>
<div id="addbtn" onclick="reveal()">Add Events</div>
</div>
<div id="layer1"></div>
<div id="formlayer">
<div id="text">Event Details</div>
<form>
<label for="Title">Event Title: </label>
<input type="text" name="ftitle" id="ftitle"> <br><br>
<label for="Time">Event Time: </label>
<input type="text" name="ftime" id="ftime"> <br><br>
<label for="Desc">Event Description: </label>
<input type="text" name="fdesc" id="fdesc"> <br>
<button class="fbut" onclick="addEvent()">Submit</button>
<button class="fbut" onclick="hide()">Close</button>
</form>
</div>
However, when I fill up the details in the form and click submit button, the new eventcard gets appended in the events div for a split second and that too with all the correct information and styling, but then automatically gets deleted for some reason. Why it is getting deleted? I have also tried placing the script in <head> and after the </body> hoping that would work but it doesn't.
Could you guys please point out where I am doing wrong? Also I am doing this on Firefox browser (it might be related).
Add type="button" to your two buttons in the form, otherwise they will submit the form. This will cause a reload, so you lose your dynamic updates.
<button type="button" class="fbut" onclick="addEvent()">Submit</button>
<button type="button" class="fbut" onclick="hide()">Close</button>
lets say, I have
<div class = "buttons">
<button onclick= "toggleFirst()"> Show me Hide me 1</button>
<button onclick= "toggleSecond()"> Show me Hide me 2</button>
<button onclick= "toggleThird();"> Show me Hide me 3</button>
</div>
<div style="display: none" id="one" > Random Content1 < /div>
<div style="display: none" id="two" > Random Content 2< /div>
<div style="display: none" id="three" > Random Content 3< /div>
How can I write a JavaScript function or functions (no jquery please) that will toggle on and off content dynamically based on each button? if i click button 1, I want content in div id one to show, if i click it again, I want content in div id one to hide and or when i click button 2 , I want only content in dive id two to show and hide other stuff...so same patter and logic for all of them.
You've already started by giving each of those buttons a function to execute onClick. Just define those functions and check the display property of the style property of your divs.
I went ahead and made a simpler toggleId function as well to limit how much code is duplicated.
It's also worth noting that < /div> is invalid. You don't put a space in the front of a closing HTML tag. You can put one at the end, but there's no reason to. Just use </div>.
function toggleFirst()
{
toggleId("one");
}
function toggleSecond()
{
toggleId("two");
}
function toggleThird()
{
toggleId("three");
}
function toggleId(id)
{
var div = document.getElementById(id);
if(div.style.display == "none")
div.style.display = "block";
else
div.style.display = "none";
}
<div class = "buttons">
<button onclick= "toggleFirst()"> Show me Hide me 1</button>
<button onclick= "toggleSecond()"> Show me Hide me 2</button>
<button onclick= "toggleThird();"> Show me Hide me 3</button>
</div>
<div style="display: none" id="one" > Random Content1 </div>
<div style="display: none" id="two" > Random Content 2</div>
<div style="display: none" id="three" > Random Content 3</div>
For that you can use the style.display property
function toggleFirst() {
let one = document.getElementById("one");
if (one.style.display == "none") {
one.style.display = "block"
} else {
one.style.display = "none"
}
}
function toggleSecond() {
let two = document.getElementById("two");
if (two.style.display == "none") {
two.style.display = "block"
} else {
two.style.display = "none"
}
}
function toggleThird() {
let three = document.getElementById("three");
if (three.style.display == "none") {
three.style.display = "block"
} else {
three.style.display = "none"
}
}
<div class="buttons">
<button onclick="toggleFirst()"> Show me Hide me 1</button>
<button onclick="toggleSecond()"> Show me Hide me 2</button>
<button onclick="toggleThird();"> Show me Hide me 3</button>
</div>
<div style="display: none" id="one"> Random Content1
</div>
<div style="display: none" id="two"> Random Content 2
</div>
<div style="display: none" id="three"> Random Content 3
</div>
change the functions onclick like i did and you don't have to do 3 functions
, you just need one
function toggContent(content_id) {
const x = document.getElementById(content_id)
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
<div class="buttons">
<button onclick="toggContent('one')"> Show me Hide me 1</button>
<button onclick="toggContent('two')"> Show me Hide me 2</button>
<button onclick="toggContent('three')"> Show me Hide me 1</button>
</div>
<div style="display: none" id="one"> Random Content1
</div>
<div style="display: none" id="two"> Random Content 2
</div>
<div style="display: none" id="three"> Random Content 3
</div>
I have the following problem, I would like to create a few spoilers. This has worked so far, but I would like that if a spoiler is open and one clicks on another, the opened again closes.
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/hide</button>
<div id="spoiler" style="display:none">
Content
</div>
<br><br>
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler2') .style.display=='none') {document.getElementById('spoiler2') .style.display=''}else{document.getElementById('spoiler2') .style.display='none'}">Show/hide</button>
<div id="spoiler2" style="display:none">
Content2
</div>
Assign a common class to all spoilers and on click hide the contents of all the spoilers using the class name and simply show only the one you want to show:
I have created a function for this like so:
<script>
function showSpoiler(spoilerId)
{
var spoilers = document.getElementsByClassName('spoilers');
for(var i=0;i<spoilers.length; i++)
{
spoilers[i].style.display = "none";
}
document.getElementById(spoilerId).style.display = "block";
}
</script>
<button title="Click to show/hide content" type="button" onclick="showSpoiler('spoiler');">Show/hide</button>
<div id="spoiler" class="spoilers" style="display:none">
Content
</div>
<br><br>
<button title="Click to show/hide content" type="button" onclick="showSpoiler('spoiler2');">Show/hide</button>
<div id="spoiler2" class="spoilers" style="display:none">
Content2
</div>
spoilers is the common class which needs to be hidden before showing the specific one.
Remember
getElementsByClassName() gives out an array that is why the for loop is in place.
To make it easier for you to start, I'll give you an example made for Event Listener for Radio buttons.
code:
document.getElementById("type_test").addEventListener("click", functio_test);
document.getElementById("type_test1").addEventListener("click", functio_test);
function functio_test(){
var x = document.querySelector('input[name="type_test"]:checked').value;
//var x = document.forms[0].elements.type_test.value;
if(x == "ola"){
alert("Ola José");
document.getElementById('disp_0').style.display = 'block';
document.getElementById('disp_1').style.display = 'none';
}
else if(x == "adeus"){
alert("Adeus José");
document.getElementById('disp_1').style.display = 'block';
document.getElementById('disp_0').style.display = 'none';
}
else {
alert("Continua José");
}
}
<div id="select_0">
<br> <input id = "type_test" type="radio" name="type_test" value="ola"> ola
<input id = "type_test1" type="radio" name="type_test" value="adeus"> adeus <br/> <br><br/>
</div>
<div id="disp_0" style="display:none">
<input type="text" name="lastname" value="ola Jose" ><br><br/>
</div>
<div id="disp_1" style="display:none">
<input type="text" name="lastname1" value="Adeus Jose" ><br><br/>
</div>
I hope the post helps you.
you can use classes to accomplish this (class="spoilers")
<button title="Click to show/hide content" type="button" onclick="toggleSpoiler('spoiler')"> Show/hide </button>
<div id="spoiler" style="display:none" class="spoilers">
Content
</div>
<br><br>
<button title="Click to show/hide content" type="button" onclick="toggleSpoiler('spoiler2')"> Show/hide </button>
<div id="spoiler2" style="display:none" class="spoilers">
Content2
</div>
<script>
function toggleSpoiler(id) {
var spoilers = document.getElementsByClassName("spoilers");
for(var i = 0; i < spoilers.length; i++) {
if (spoilers[i].id != id) {
spoilers[i].style.display = "none";
}
}
if(document.getElementById(id).style.display=='none') {
document.getElementById(id).style.display='';
} else {
document.getElementById(id).style.display='none';
}
}
</script>
The way I would do this would be to create two additional classes and add an additional div to use the parent/child association to determine which spoiler (in relation to the button) needs to be displayed.
Starting off with the classes, let's call them
.spoiler
and
.active
The idea is to make the .spoiler class hide and the .active class show, like so:
.spoiler {
display:none;
}
.spoiler.active {
display:block;
}
All spoiler elements would have .spoiler as a class and only the currently active spoiler would have the .active class, now let's create our new div which will bundle the spoilers and their buttons to have a common parent.
<div class="spoiler-item">
<button title="Click to show/hide content">
Show/Hide
</button>
<div class="spoiler">
Content
</div>
</div>
<div class="spoiler-item">
<button title="Click to show/hide content">
Show/Hide
</button>
<div class="spoiler">
Content2
</div>
</div>
Now we can use the relative "spoiler-item" class when a button is pressed to determine which spoiler is related to the button being pressed and also remove the "active" class from all other "spoiler" elements to make sure only one spoiler is shown at a time.
I recommend using jQuery for this, due to time constraints I'm not going to be able to do it in pure JS.
$(document).ready(function() {
$('.spoiler-item button').click(function(e) {
if($(this).parent('.spoiler-item').find('.spoiler').hasClass('active')) { // If the item we've selected is already active
$(this).parent('.spoiler-item').find('.spoiler').removeClass('active');
return;
}
$('.spoiler.active').removeClass('active'); // Close all open spoilers
$(this).parent('.spoiler-item').find('.spoiler').addClass('active'); // Open relative spoiler
});
});
See JSFiddle for working answer: https://jsfiddle.net/vvm4xe0m
The parent div have class name 'panel'.
It contains further child divs have class name 'clonablePart' and also one button.
We need to check
1) if there are multiple clonablePart then the button which is by default disable should turn enable
2) if there is one clonable part then button should remain disabled
Note: Class name 'panel' in parent div panel; can also exist in its child div's. Also 'Input' can be multiple
Please see fiddle for more details for HTML structure.
https://jsfiddle.net/k2rbs70m/
Following is JQuery in Use:
$('.myclass').each(function () {
var lengthOfClones = $(this).closest('div.panel').find('.clonablePart').length;
var typeOfClone = $(this).data("type");
console.log('Length of Clones:' + typeOfClone + " - " + lengthOfClones);
lengthOfClones > 1 ? $('#delete' + typeOfClone).attr('disabled', false) : $('#delete' + typeOfClone).attr('disabled', true);
});
If anything unclear please write.
Following is HTML for an idea:
<div id="Bank_panel" class="panel">
<div id="Bank_panel1" class="clonablePart">
1) Bank Account
</div>
<div id="Bank_panel1" class="clonablePart">
2) Account Name
</div>
<input type="button" value="delete" id="deleteBank" data-type="Bank" disabled /> <i> Make it Enable onload as it have two values</i>
</div>
If you have only one input child per panel class, you can target it like this:
$(this).find('input')
In your code, this would give:
lengthOfClones > 1 ? $(this).find('input').attr('disabled', false) : $(this).find('input').attr('disabled', true);
https://jsfiddle.net/ggngygzy/
EDIT
IF you have more than one input child per panel, you can find a unique property and target it. Like this for example:
$(this).find('input[type=button]')
There are problem in your code
$(this).data("type") always returns Clones, which is incorrect.
So, give a custom attribute data-type to each of the div under .panel, say for Bank, give data-type="Bank" and so on.
So the HTML becomes:
<div id="Bank_panel" class="panel" data-type="Bank">
<div id="Bank_panel1" class="clonablePart">
1) Bank Account
</div>
<div id="Bank_panel1" class="clonablePart">
2) Account Name
</div>
<input type="button" value="delete" id="deleteBank" data-type="Bank" disabled /> <i> Make it Enable onload as it have two values</i>
</div>
<br/>
<div id="insurance_panel" class="panel" data-type="Insurance">
<div id="insurance_panel1" class="clonablePart">
1) Insurance Account
</div>
<div id="insurance_panel1" class="clonablePart">
2) Insurance Name
</div>
<input type="button" value="delete" id="deleteInsurance" data-type="insurance" disabled /> <i> Make it Enable onload as it have two values</i>
</div>
<br/>
<div id="economy_panel" class="panel" data-type="economy">
<div id="economy_panel1" class="clonablePart">
1) Economy Account
</div>
<input type="button" value="delete" id="deleteeconomy" data-type="economy" disabled /> <i> Keep it disable</i>
</div>
See the working fiddle here: "http://jsfiddle.net/k2rbs70m/7/"
You can use the following code:
$('.panel').each(function () {
var lengthOfClones = $(this).find('.clonablePart').length;
var flagDisable = lengthOfClones == 1
$(this).find("input[type='button']").prop('disabled',flagDisable);
});
It will fix your problem.
https://jsfiddle.net/k2rbs70m/9/
This will solve your issue you presented in the Fiddle:
$('.panel').each(function () {
// Find the button with a value of `delete`
var button = $(this).find("input[value='delete']");
var clones = $(this).find('.clonablePart');
if(clones.length > 1)
button.removeAttr('disabled')
else
button.attr('disabled', true) ;
});
The trick is: you only want children to be counted, so use .find(). Then, find the button inside your wrapper and enable and disable that by the amount of results found.
//Will take outer panels only
$('.panel').each(function () {
var button = $(this).find("input[value='delete']");
var clones = $(this).find('.clonablePart');
var type = button.data("type");
if(clones.length > 1)
button.removeAttr('disabled')
else
button.attr('disabled', true) ;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="Bank_panel" class="panel">
<div id="Bank_panel1" class="clonablePart">
1) Bank Account
</div>
<div id="Bank_panel1" class="clonablePart">
2) Account Name
</div>
<input type="button" value="delete" id="deleteBank" data-type="Bank" disabled /> <i> Make it Enable onload as it have two values</i>
</div>
<br/>
<div id="insurance_panel" class="panel">
<div id="insurance_panel1" class="clonablePart">
1) Insurance Account
</div>
<div id="insurance_panel1" class="clonablePart">
2) Insurance Name
</div>
<div class="panel"></div> <!--Remember outer panel can have inner panel-->
<input type="button" value="delete" id="deleteInsurance" data-type="insurance" disabled /> <i> Make it Enable onload as it have two values</i>
</div>
<br/>
<div id="economy_panel" class="panel">
<div id="economy_panel1" class="clonablePart">
1) Economy Account
</div>
<input type="button" value="delete" id="deleteeconomy" data-type="economy" disabled /> <i> Keep it disable</i>
</div>