This question already has answers here:
How to add/remove a class in JavaScript?
(13 answers)
Closed 1 year ago.
how to hide class with javascript . I get a value if status = 1 then the class show, and if status = 2 then the class is hidden.
<div class="entry-img" id="status">
<img id="txt_img_content_1" alt="" class="img-fluid">
</div>
var divElement = document.getElementById("status");
if(status==2){
divElement.classList.remove("entry-img");
}
if(status==1){
divElement.classList.add("entry-img");
}
You can do it with the code something like this.
var element = document.getElementById("status");
if(status==2){
element.classList.remove("entry-img");
}
if(status==1){
element.classList.add("entry-img");
}
For more information you can refer to this links https://www.w3schools.com/howto/howto_js_remove_class.asp
https://www.w3schools.com/howto/howto_js_add_class.asp
https://www.w3schools.com/js/js_if_else.asp
I thing, that toggle might be to use in your case:
function setStatus(status) {
document.querySelector("#status").classList.toggle("entry-img", status == 1);
}
div {
width: 30px;
height: 30px;
background: #f00;
border-radius: 100%;
}
.entry-img {
background: #0f0;
}
<div id="status"></div>
<button onclick="setStatus(1)">1</button>
<button onclick="setStatus(2)">2</button>
Related
This question already has answers here:
Check if an element contains a class in JavaScript?
(30 answers)
Closed 4 months ago.
I have a small code where i want to
check which class is on the element curently.
change the curent class to the other class
html :
<div class="text-area-box" id="text-area-box">
<input type="text" name="" required="">
<label>Titre</label>
</div>
css:
.text-area-box-active{
position: relative;
}
.text-area-box {
position: relative;
display: none;
}
js (not correct) just a way to show what i want to do :
if(curentClass = text_area_box)
{
element.classList.remove('text-area-box');
element.classList.add('text-area-box-active');
}
else{
element.classList.remove('text-area-box-active');
element.classList.add('text-area-box');
}
how can i make the correct javascript.
You can do this by getting element using JavaScript and then by using classList.contains() you can check whether this element contains a particular class or not.
//JavaScript to handle logic
function updateClass(){
//get element to get, compare and update class
var element = document.getElementById("text-area-box");
//classListApi to chek if this element has class
if(element.classList.contains('text-area-box'))
{
element.classList.remove('text-area-box');
element.classList.add('text-area-box-active');
}
else{
element.classList.remove('text-area-box-active');
element.classList.add('text-area-box');
}
}
//Call this functions according to your condition
updateClass()
//adding colors for testing
.text-area-box{
background-color:red !important;
}
.text-area-box-active{
background-color:yellow !important;
}
<div class="text-area-box" id="text-area-box">
<input type="text" name="" required="">
<label>Titre</label>
</div>
I'm trying to make a window that slide up when the X button(close.png) is clicked.
I added the Wrap element with JavaScript, and added an img element inside.
Then, I put following JavaScript, but there is no change when I press the X button.
<script>
const parent3 = document.querySelector('#wrap');
const billingField3 = document.querySelector('#woocommerce-input-wrapper');
const newImg = document.createElement('img');
newImg.setAttribute("src", "//t1.daumcdn.net/postcode/resource/images/close.png");
newImg.setAttribute('id', 'btnFoldWrap');
newImg.style.cssText = 'cursor:pointer;position:absolute;right:0px;top:-1px;z-index:1';
newImg.onclick = "offDaumZipAddress();"
parent3.insertBefore(newImg, billingField3);
</script>
function offDaumZipAddress() {
jQuery("#wrap").slideUp();
}
Website structure is
<div class="woocommerce-billing-fields__field-wrapper">
<p class="billing_postcode_find_field">..
<span class="woocommerce-input-wrapper">...
</span>
</p>
<div id="wrap" ..>
<img src="..."></img>
</div>
<p class="billing_address_1_field">
<span class="woocommerce-input-wrapper">
Checking with the console of chrome developer tools doesn't show any errors.
Could someone please let me know what am I missing?
Thank you.
The value of the onclick property must be a function reference, not a JavaScript string.
newImg.onclick = offDaumZipAddress;
You have your answer; here is a working example of that loosely based on your code (so the inserted image actually shows, added some CSS etc. to illustrate)
//gets first one of this type
const billingField3 = document.querySelector('.woocommerce-input-wrapper');
// Get a reference to the parent node/ gets first one of this type
const parent3 = billingField3.parentNode;
//console.log(parent3);
//console.log(billingField3);
// Create the new node to insert
const newImg = document.createElement('img');
newImg.setAttribute("src", "//t1.daumcdn.net/postcode/resource/images/close.png");
newImg.setAttribute('id', 'btnFoldWrap');
newImg.setAttribute('alt', 'folderWrap');
// no not this: newImg.style.cssText = 'cursor:pointer;position:absolute;right:0px;top:-1px;z-index:1';
// this:
newImg.classList.add("inserted-image");
newImg.onclick = offDaumZipAddress;
//console.log("Thing:",newImg);
//console.log("HTML:", parent3.innerHTML);
parent3.insertBefore(newImg, billingField3);
//console.log("New HTML:", parent3.innerHTML);
function offDaumZipAddress() {
console.log('here we go');
jQuery("#wrap").slideUp();
}
.billing_postcode_find_field {
border: solid blue 1px;
padding: 1rem;
}
.woocommerce-input-wrapper {
border: solid 1px lime;
padding: 1rem;
}
.inserted-image {
cursor: pointer;
/* This is odd, makes it not clickable:
position: absolute;
right: 0px;
top: -1px;
z-index: 1;*/
border: solid 1px red;
min-width: 1.5rem;
min-height: 1.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="woocommerce-billing-fields__field-wrapper">
<p class="billing_postcode_find_field">..
<span class="woocommerce-input-wrapper">...</span>
</p>
<div id="wrap">
<img src="//t1.daumcdn.net/postcode/resource/images/close.png" alt="png"></img>
</div>
<p class="billing_address_1_field">
<span class="woocommerce-input-wrapper"></span>
</div>
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 3 years ago.
I'm using div with CSS value float: right;. I would like to change that by using JavaScript to change float attribute to left using on click function.
So I'm using click event listener:
document.getElementById("english").addEventListener("click", function isEnglish(){
document.getElementsByClassName('tab').style.cssFloat = "left";
});
but I fail to change float direction, the element stays in the same place. Codepen
How can I change float direction using JavaScript?
document.getElementsByClassName('tab') returns a list of elements to you may have to iterate over it.
The js property for float is float instead of ccsFloat you used in your code.
document.getElementById("english").addEventListener("click", function isEnglish(){
Array.from(document.getElementsByClassName('tab')).forEach(v => {
v.style.float = "left";
});
});
p {
width: 50px;
height: 50px;
float: right;
margin: 10px;
background: red
}
<p class="tab">a</p>
<p class="tab">b</p>
<p class="tab">c</p>
<p class="tab">d</p>
<p class="tab">e</p>
<button id="english">english</button>
This question already has answers here:
How can I change an element's class with JavaScript?
(33 answers)
Closed 5 years ago.
I am trying to use removeAttribute() to remove one specific class attribute from an element. The problem is that removeAttribute() seems to remove all of the other defined class attributes on the element.
Example:
HTML
<span id="click">Click</span>
<div id="box" class="blue dotted width-50"></div>
CSS
.blue {
background-color: blue;
}
.dotted {
border: thin dotted grey;
}
.width-50 {
width: 50px;
height: 50px;
}
JS
var el = document.getElementById('click');
el.addEventListener("click", removeColor, false);
function removeColor() {
var box = document.getElementById('box');
box.removeAttribute('class', 'blue');
}
How can I just remove the one class attribute from the element, without affecting the other class attributes on the element?
http://jsbin.com/xoxodezeze/edit?html,css,js,output
You need to use
function removeColor() {
var box = document.getElementById('box');
box.classList.remove('blue');
}
The problem is that removeAttribute() removes the complete attribute name class
SO <div id="box" class="blue dotted width-50"></div>
becomse like <div id="box" ></div>.
You just want to remove the class here is doc
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
JS code:
function showCaption() {
var captionVis = $('.grey-box-caption-text').css('display');
if(captionVis = "none") {
$('.grey-box-caption-text').width(0);
$(this).find('.grey-box-caption-text').show().animate({'width': '464px'},750);}
} else {
$(this).find('.grey-box-caption-text').animate({'width': '0'},750,
function(){$(this).hide();});
}
};
$('.caption-container').click(function() {
showCaption();
return false;
}
);
HTML code:
<div class="one-half column home-three-img">
<div class="caption-container">
<div class="grey-box-caption">
</div>
<div class="grey-box-caption-text">This is a caption test - Hopefully this works
</div>
</div>
<img src="images/3.jpg">
</div>
This won't work and I'm a JS noob. Please help.
I'm trying to get the caption section to slide out from the left to the right. When i click on the parent container nothing happens. I'm expecting the caption to shoot out and hide when I click again.
I have Jquery loaded properly and have a document.ready function that works.
Link to the WIP http://clients.pivotdesign.com/dev/annual_report_2014/index.html
A big problem is that the value of this won't be set in your "showCaption" function. Add a return false; to the end of that function:
function showCaption(){
var captionVis = $('.grey-box-caption-text').css('display');
if (captionVis == "none") {
$('.grey-box-caption-text').width(0);
$(this).find('.grey-box-caption-text').show().animate({'width': '464px'},750);
}
else {
$(this).find('.grey-box-caption-text').animate({'width': '0'},750, function(){
$(this).hide();
});
}
};
and then change the handler assignment to:
$('.caption-container').click(showCaption);
Also note that your test in that if statement was incorrect: use == or === for comparison.
I modified the CodePen from Pointy a bit and it should do the same with less code.
Why the gray box increases the height here in the SO demo, I don't know. In this CodePen it works with-out this "bug".
function showCaption() {
var $graybox = $('.grey-box-caption-text');
$graybox.animate({
width: 'toggle',
opacity: 'toggle'
}, 'slow');
};
$(function(){
$("#wrapper").on("click", showCaption);
});
.grey-box-caption {
min-height: 3em;
min-width: 20px;
background-color: #bbb;
display: inline-block;
}
.grey-box-caption-text {
display: none;
padding: 1em;
font-family: sans-serif;
white-space: nowrap;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class=grey-box-caption>
<div class=grey-box-caption-text>
Hello World this is some text.
</div>
</div>
</div>