I'm looking for a solution to change multiple buttons to an unchecked state each time a button is clicked. Here's the div
<div id="season" align="center">
<span class="yui-button yui-radio-button yui-button-checked yui-radio-button-checked" id="season">
<span class="first-child">
<button type="button" id="season-button">Spring</button>
</span>
</span>
<span class="yui-button yui-radio-button" id="season">
<span class="first-child">
<button type="button" id="season-button">Summer</button>
</span>
</span>
<span class="yui-button yui-radio-button" id="season">
<span class="first-child">
<button type="button" id="season-button">Fall</button>
</span>
</span>
<span class="yui-button yui-radio-button" id="season">
<span class="first-child">
<button type="button" id="season-button">Winter</button>
</span>
</span>
</div>
I can access the buttons by doing:
var groupName = document.getElementById(id).getElementsByTagName("button")
but if I try
for (i = 0; i < groupName.length; i++) {
groupName[i].set("checked", false);
}
nothing happens
Any help is greatly appreciated!
Thanks!
Checked isn't a valid attribute for <button>'s. If you want radio like buttons, use <input type="radio"> and style them like buttons. Take a look at the official YUI Grouped Button example for how to do this.
Related
How can I condense this many span tags? I am trying to get it as small as possible. Any advice helps, thanks!
<header>
cat <i class="fa-d fa-ct"></i>>
<div class="particle">
<span style="--i:50;"></span>
<span style="--i:21;"></span>
<span style="--i:16;"></span>
<span style="--i:18;"></span>
<span style="--i:13;"></span>
<span style="--i:22;"></span>
<span style="--i:15;"></span>
<span style="--i:24;"></span>
<span style="--i:17;"></span>
<span style="--i:28;"></span>
<span style="--i:12;"></span>
<span style="--i:26;"></span>
<span style="--i:23;"></span>
<span style="--i:13;"></span>
<span style="--i:17;"></span>
<span style="--i:11;"></span>
<span style="--i:21;"></span>
<span style="--i:16;"></span>
</div>
</div>
This is why I am trying to get. Each --i:Number creates a particle at random times.
In case you were looking for a more compact way of generating the HTML, then maybe the following is helpful?
const html=[...new Array(18)].map(_=>`<span style="--i:${Math.ceil(Math.random()*40+10)};"></span>`).join("\n");
console.log(html); // can be commented out ...
document.querySelector(".particle").innerHTML=html;
<header>
cat <i class="fa-d fa-ct"></i>
<div class="particle"></div>
</header>
I have multiple div which has the same class and I want to display only one div per click which belongs to the parent div. I want to hide and show div "post-reply-box".
HTML
<div class="comet-avatar">
<img src="images/resources/comet-3.jpg" alt="">
</div>
<div class="we-comment">
<div class="coment-head">
<h5>Olivia</h5>
<span>16 days ago</span>
<a class="we-reply" href="javascript:void(0)" title="Reply"><i class="fa fa-reply"></i></a>
<ins>280</ins>
</span>
</div>
<p>i like lexus cars, lexus cars are most beautiful with the awesome features, but this car is really outstanding than lexus</p> </div>
<div class="comnt comnt-reply">
<div class="post-reply-box" style="padding:10px; display: none;">
<form method="post">
<textarea placeholder="You are Replying..."></textarea>
<button class="replyButton" type="submit">send</button>
<button class="cancelButton">cancel</button>
</form>
</div>
</div>
jQuery
$(document).ready(function(){
$(".fa-reply").on("click",function(){
$(".post-reply-box").css("display","block");
});
});
$(document).ready(function(){
$(".cancelButton").on("click",function(){
$(".post-reply-box").css("display","none");
});
});
The issue in your code is because you're using a class selector which retrieves all the .post-reply-box elements in the DOM, not just the one relevant to the button which was clicked.
To fix this use DOM traversal to relate the elements to each other. In this specific example use closest() to get the .we-comment related to the button, then next() to get the .comnt-reply container, then find().
In addition there some other issues which need to be addressed:
There's no need to duplicate document.ready handlers. Put all the logic in a single one.
Use show() and hide() instead of css() to set the display state of the element.
Use a CSS file instead of inline style elements to set style rules.
Attach the event handler to the a element, not the child i, and call preventDefault() on the event that's raised.
Add the type="button" attribute to the Cancel button so that clicking it does not submit the form.
With all that said, try this:
jQuery($ => { // updated document.ready handler
$(".we-reply").on("click", e => {
e.preventDefault()
$('.post-reply-box').hide(); // hide all
$(e.target).closest('.we-comment').next('.comnt-reply').find(".post-reply-box").show(); // show relevant
});
$(".cancelButton").on("click", function() {
$(".post-reply-box").hide();
});
});
.post-reply-box {
padding: 10px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="comet-avatar">
<img src="images/resources/comet-3.jpg" alt="">
</div>
<div class="we-comment">
<div class="coment-head">
<h5>Olivia</h5>
<span>16 days ago</span>
<a class="we-reply" href="javascript:void(0)" title="Reply"><i class="fa fa-reply"></i> Reply</a>
<span class="like-comment" data-toggle="tooltip" title="like">
<i class="ti-heart"></i>
<ins>280</ins>
</span>
</div>
<p>i like lexus cars, lexus cars are most beautiful with the awesome features, but this car is really outstanding than lexus</p>
</div>
<div class="comnt comnt-reply">
<div class="post-reply-box">
<form method="post">
<textarea placeholder="You are Replying..."></textarea>
<button class="replyButton" type="submit">send</button>
<button class="cancelButton" type="button">cancel</button>
</form>
</div>
</div>
<div class="comet-avatar">
<img src="images/resources/comet-3.jpg" alt="">
</div>
<div class="we-comment">
<div class="coment-head">
<h5>Olivia</h5>
<span>16 days ago</span>
<a class="we-reply" href="javascript:void(0)" title="Reply"><i class="fa fa-reply"></i> Reply</a>
<span class="like-comment" data-toggle="tooltip" title="like">
<i class="ti-heart"></i>
<ins>280</ins>
</span>
</div>
<p>i like lexus cars, lexus cars are most beautiful with the awesome features, but this car is really outstanding than lexus</p>
</div>
<div class="comnt comnt-reply">
<div class="post-reply-box">
<form method="post">
<textarea placeholder="You are Replying..."></textarea>
<button class="replyButton" type="submit">send</button>
<button class="cancelButton" type="button">cancel</button>
</form>
</div>
</div>
I am trying to hide and display a div based on the state of a checkbox using javascript but I don't seem to be getting it right. I am not very experienced with js so I could be missing something very obvious. Any advice would be much appreciated. the target div is the on-toggle div in the second half of the html code.
var checkbox = document.querySelector("input[name=toggle]");
checkbox.addEventListener( 'change', function() {
if(this.checked) {
document.getElementById("on-toggle").style.display = "block";
document.getElementById("on-toggle").style.height = "auto";
} else {
document.getElementById("on-toggle").style.display = "none";
document.getElementById("on-toggle").style.height = "0";
}
<div id="switch">
<h2 id="CTA-switch">Turn creativity on </h2>
<div class="switch">
<input type="checkbox" name="toggle">
<label for="toggle">
<i class="bulb">
<span class="bulb-center"></span>
<span class="filament-1"></span>
<span class="filament-2"></span>
<span class="reflections">
<span></span>
</span>
<span class="sparks">
<i class="spark1"></i>
<i class="spark2"></i>
<i class="spark3"></i>
<i class="spark4"></i>
</span>
</i>
</label>
</div>
</div>
<div id="on-toggle">
<div id="references">
<h1>REFERENCE SITES</h1>
</div>
</div>
</div>
You'll need to grab an actual element so your javascript code works. The id "on-toggle" does not currently exist on any element on your html code.
Let's say i create dynamically some divs, each has it's dynamically created id (div0, div1, div2, etc.) and i'd like with a function to pass through currently existent divs and put their innerHTML into an array (one, two, three in this case), how can i achieve this in javascript?
html example:
<div contenteditable="false" id="div0">
one
<span id="one-close">
<i class="material-icons">close</i>
</span>
</div>
<div contenteditable="false" id="div1">
two
<span id="two-close">
<i class="material-icons">close</i>
</span>
</div>
<div contenteditable="false" id="div2">
three
<span id="three-close">
<i class="material-icons">close</i>
</span>
</div>
You could also use spread syntax
const divsContents = [...document.querySelectorAll("div>a")].map(e=>e.innerHTML);
console.log(divsContents);
<div contenteditable="false" id="div0">
one
<span id="one-close">
<i class="material-icons">close</i>
</span>
</div>
<div contenteditable="false" id="div1">
two
<span id="two-close">
<i class="material-icons">close</i>
</span>
</div>
<div contenteditable="false" id="div2">
three
<span id="three-close">
<i class="material-icons">close</i>
</span>
</div>
Using some magic from here, because document.querySelectorAll returns a NodeList and not an array, we can get the div elements into an array and use .map() to return the div content into an array.
var divs = [].slice.call(document.querySelectorAll('div'));
console.log(divs.map(div => div.innerHTML));
<div contenteditable="false" id="div0">
one
<span id="one-close">
<i class="material-icons">close</i>
</span>
</div>
<div contenteditable="false" id="div1">
two
<span id="two-close">
<i class="material-icons">close</i>
</span>
</div>
<div contenteditable="false" id="div2">
three
<span id="three-close">
<i class="material-icons">close</i>
</span>
</div>
Ideally you should be using a selector like #divcontainer > div to fetch all the divs in the container, but if you know all the ID's, you can use a selector such as:
document.querySelectorAll('#div0, #div1, #div2')
you can use jquery or javascript function for get your div:
myArray[0] = document.getElementByID("div0").innerHtml;
myArray[1] = document.getElementByID("div1").innerHtml;
myArray[2] = document.getElementByID("div2").innerHtml;
Give same class to divs and access by $('.class-name') or add a container div and get your div array by $('#divId div').
Use a loop after creating a divs collection using querySelectorAll:
let divs = document.querySelectorAll('div');
let arr = [];
for (let i = 0; i < divs.length; i++) {
arr.push(divs[i].innerHTML);
}
console.log(arr);
<div>hi</div>
<div>hi2</div>
<div>hi3</div>
Here is your solution
var arr = [];
function myFunction() {
var anchors = document.getElementsByTagName("a");
for(var i = 0; i < anchors.length; i++){
arr.push(anchors[i].text);
}
}
console.log(arr);
So many ways of doing this. Yet an other way: using ES6 Array.from
let divsA = Array.from(document.querySelectorAll("[id^='div'] a"));
divsA.map(a => console.log(a.innerHTML));
<div contenteditable="false" id="div0">
one
<span id="one-close">
<i class="material-icons">close</i>
</span>
</div>
<div contenteditable="false" id="div1">
two
<span id="two-close">
<i class="material-icons">close</i>
</span>
</div>
<div contenteditable="false" id="div2">
three
<span id="three-close">
<i class="material-icons">close</i>
</span>
</div>
Say i have a list of ids [[1,2],[4,5,6]]
I am trying to create a parent element for each set of ids, say a div
currently its:
<span id="data-inject">
<br> <br>
<span id=1>Barack</span>
<br> <br>
<span id=2>Obama</span>
<span id=3>xx</span>
<span>
I would like it to be:
<span id="data-inject">
<br> <br>
<div id=test>
<span id=1>Barack</span>
<br> <br>
<span id=2>Obama</span>
</div>
<span id=3>xx</span>
</span>
is there any way to achieve the same using java script?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="data-inject"><br> <br> <span id="0">xx</span> <span id="1">Barack</span> <span id="2">Obama</span> <span id="3">xx</span> <span id="4">Barack</span> <span id="5">Obama</span> <span id="6">Barack</span> <span id="7">Obama</span><br> <br> <span id="8">sdsds</span> <span id="9">Barack</span> <span id="10">Obama</span></span>
Try this :
$('#data-inject').find('span').slice(0,2).wrapAll('<div id="test"></div>').after(' ');
Here is a Jsfiddle : https://jsfiddle.net/8L1mutxr/
.after(' ')
add spaces after elements. But your HTML is very dirty by the way.
Using jquery you can easily create a new element for each array item and then loop through the inner array to search and append to the newly create item,
the example should be auto explanatory:
var arr = [[1,2],[4,5,6], [7,8,9,10]]
arr.forEach((x, i) => {
// we create a parent div for each item
var parent = $('<div class="parent'+ i + '"></div>')
// we append it
$('#data-inject').append(parent)
// we loop through inner arrays and append them to newly created 'parent'
x.forEach(z => {
parent.append( $('#' + z) )
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="data-inject">
<span id="0">xx</span>
<span id="1">Barack</span>
<span id="2">Obama</span>
<span id="3">xx</span>
<span id="4">Barack</span>
<span id="5">Obama</span>
<span id="6">Barack</span>
<span id="7">Obama</span>
<span id="8">sdsds</span>
<span id="9">Barack</span>
<span id="10">Obama</span>
</span>