Change color of collapsible on click materialize - javascript

I would like to change the color of the collapsible header only when I click on it.
<div class="collapsible-header" onclick="connect()"></div>
I have to add the color inside the class element, and I do not really know how to add something to it when I call the "connect" funtion. Is this possible ?
Thank you !
Tried with the following but is not working
HTML
<div class="collapsible-header" onclick="connect(this)">Robot</div>
And in JS
function connect(element)
{
element.style.color = 'red';
if (connection_status == 0)
{
client.connect(options);
};
}

Take a new class and assign the styles you want to append then do this
$(".collapsible-header").click(function(){
$(".collapsible-header").toggleClass("NEWCLASS");
});

https://jsbin.com/sojefubudo/edit?html,js,console,output
<div class="collapsible-header" onclick="connect(this)"></div>
And in javascript :
function connect(element) {
element.style.color = 'red';
}

Have a look on this fiddle:
https://jsfiddle.net/swarn_singh/9a6djpwp/
<div onclick="this.style.color = 'red'">
Change color with inline javascript
</div>
<div onclick="changeColor(this)">
Change color with javascript function
</div>
<script>
function changeColor(element){
element.style.color = 'blue';
}
</script>

<div class="collapsible-header" onclick="javascript:this.className += ' additionalClass'"></div>

Use ToggleClass for better result
(function(){
$("#run").click(()=>{
//$(this).css('background','yellow');
$("#run").toggleClass('yellow');
});
}());
.yellow {
background: yellow!important;
}
.red {
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="run" class="red" style="position:absolute;height:100px;width:10px;"></div>

Related

HTML DOM getElementsByTagName issue

Currently, both this is using a button, but is there a possible to have this query without a button but just onclick?
Changes the target of the anchor to google.com:
<button onclick="document.querySelectorAll('ul>li>a').forEach(function(link){link.href='http://google.de';});"> ChangeHREF </button>
Changes the color of the header of the page:
<button onclick='(document.getElementsByTagName("h1")[0]).style.color="blue"'>XSS attach</button>
Add an eventlister for click on a tag e.g. a DIV that starts a function (change). In this function get with querySelector your header H1 and a class blue. Via CSS the color of the header changes to blue.
So you don't need a button for this.
document.getElementById('myDiv').addEventListener('click', change);
function change() {
document.querySelector('h1').classList.add("blue");
}
h1.blue {
background: blue;
}
<h1>Header</h1>
<div id="myDiv">Press this DIV for change H1 to blue</div>
of course you can here is one I used div and you can use other but in the way makes sense like you can't use select
change.onclick = () => {
document.getElementsByTagName('h1')[0].style.color = 'red';
}
<h1>Hello world</h1>
<div id="change">Change Color</div>
change.onclick = () => {
document.querySelectorAll('a').forEach(link => {
link.href = 'http://google.de';
});
var links = document.getElementsByTagName('a');
console.log(links[0].href);
console.log(links[1].href);
}
a
b
<div id="change">Change</div>

changing the background color on clicking on the button

I'm learning javascript!
What I need to do, is to change the background-color at the same time when the image is changing by clicking on the button.
Changing the picture, from light-On to light-off, is working properly, the only problem is that the color of the background of my html page, is not changing.
function colorize() {
var element = document.getElementById("azul");
element.style.backgroundColor = 'blue';
element.style.color = "yellow";
}
html{
background:
grey;
}
#azul:focus {
background: blue;
}
<div id="branca">
<h1>LOI Lampen aanzetten en uitzetten</h1>
<button id="azul" onclick="document.getElementById('myImage').src = '/img/393533_02.PNG'">Turn on the light</button>
<img id="myImage" src="img/393533_01.PNG" class="mudar">
<div id="yellow">
<button onclick="document.getElementById('myImage', '').src='/img/393533_01.PNG'">Turn off the light</button>
</div>
</div>
You want to change background of html so what you have to do is...
function colorize() {
var element = document.getElementsByTagName("html")[0];
element.style.backgroundColor = 'blue';
}
You were taking button element and changing its color. you have to select html tag as you want to change the background-clor property assigned to it via css.
This is your solution call the colorize function too
<html>
<script>
function colorize() {
var element = document.getElementsByTagName("html")[0];
element.style.backgroundColor = 'blue';
element.style.color = "yellow";
}
</script>
<style>
html{
background:
grey;
}
#azul:focus {
background: blue;
}
</style>
<div id="branca">
<h1>LOI Lampen aanzetten en uitzetten</h1>
<button id="azul" onclick="document.getElementById('myImage').src = '/img/393533_02.PNG';colorize()">Turn on the light</button>
<img id="myImage" src="img/393533_01.PNG" class="mudar">
<div id="yellow">
<button onclick="document.getElementById('myImage', '').src='/img/393533_01.PNG'">Turn off the light</button>
</div>
</div>
</html>
You need to change the background color of the document, not element, which is your button.
Since you are new to JavaScript, let's get you off of some bad habits that you've already picked up.
Do not set up event handlers via HTML event attributes (i.e. onclick, onmouseover, etc.). This is a 25+ year old technique that we used before we had modern standards and best practices and because it's easy to use, people keep using it. But there are a variety of reasons why you should not use this technique and instead separate your JavaScript from your HTML. Instead, keep your JavaScript separate and use .addEventListener() to hook up your elements to their respective callback functions.
Whenever possible, work with pre-made CSS classes because these are easier to manage and reuse than inline CSS styles (via the .style property). You can then easily use the element.classList API to add or remove classes as needed.
See the comments inline below:
// Get references to the elements you'll need to work with
let targetImage = document.getElementById('myImage');
let btnOn = document.getElementById("on");
let btnOff = document.getElementById("off");
// Then, set up your event handlers in JavaScript, not HTML
btnOn.addEventListener("click", changeImage);
btnOff.addEventListener("click", changeImage);
function changeImage(){
// Set the target's source to the data-source attribute for the clicked button
targetImage.src = this.dataset.source;
targetImage.alt = this.dataset.alt // Now update the alt attribute
// Change the background color of the page by adding or removing a
// pre-made class to/from the body based on the button that was clicked
// Since this is a simple if/then scenario, we can use the JavaScript "ternary" operator
// which works like this: some condition ? what to do if condition is true : what to do if false
this.id === "on" ? document.body.classList.add("blue") : document.body.classList.remove("blue");
}
body { background-color: grey; } /* Style the body, not the HTML */
#on:focus { background: blue; color:yellow; }
.blue { background-color:aliceblue; } /* This will be added when on is clicked */
/* Just for this example only */
img { width:100px; }
<button id="on" data-source='https://cdn.wccftech.com/wp-content/uploads/2015/04/bulb_PNG1250.png' data-alt="On Image">Turn on the light</button>
<button id="off" data-source='https://www.radioducoeur.com/liten/radioducoeur/light-bulb-png-home-design-ideas-4-lightbulb-498-x-498-liten.jpg' data-alt="Off Image">Turn off the light</button>
<div>
<!-- <img> elements must have an alt attribute to be valid -->
<img id="myImage" src="https://www.radioducoeur.com/liten/radioducoeur/light-bulb-png-home-design-ideas-4-lightbulb-498-x-498-liten.jpg" class="mudar" alt="default image">
</div>
Here is your code:
<style>
body {
background: grey;
}
</style>
<script>
function colorize(light) {
if (light) {
document.getElementById('myImage').src = '/img/393533_02.PNG';
document.body.style.background = 'grey';
}
else {
document.getElementById('myImage').src = '/img/393533_01.PNG'
document.body.style.background = 'blue';
}
}
</script>
<body>
<div id="branca">
<h1>LOI Lampen aanzetten en uitzetten</h1>
<button id="azul" onclick="colorize(true)">Turn on the light</button>
<img id="myImage" src="img/393533_01.PNG" class="mudar"/>
<div id="yellow">
<button onclick="colorize(false)">Turn off the light</button>
</div>
</div>
</body>
Now in colorize function you can write as much parameters as you want for two different conditions.

How can I conditionally change css styles with js?

I'd like to implement some javascript that uses an if statement to change some css styles. Not sure how to do it, any help would be great!
If you want to change a single style of an element using JavaScript, use
document.getElementById(id).style.property = new style
eg :
document.getElementById("myDiv").style.color= "red";
To add a new CSS class to an element, use
document.getElementById(id).classList.add("mystyle");
To remove
document.getElementById(id).classList.remove("mystyle");
Demo :
function changeSingleStyle() {
var color = document.getElementById("myDiv").style.color;
if (color === "red")
document.getElementById("myDiv").style.color = "yellow";
else
document.getElementById("myDiv").style.color = "red";
}
function addClass() {
document.getElementById("myDiv").classList.add("mystyle");
}
function removeClass() {
document.getElementById("myDiv").classList.remove("mystyle");
}
.mystyle {
color : red;
background: green;
font-size: 50px;
}
<div id="myDiv"> This is a div </div>
<button onclick="changeSingleStyle()">changeSingleStyle</button>
<button onclick="addClass()">addClass</button>
<button onclick="removeClass()">removeClass</button>
First of all, to change CSS using JavaScript, the syntax looks like the following:
document.getElementById(id).style.property = new style
For example, if you want to change the display property of an element with id = "container" to block, it would be:
document.getElementById("container").style.display = "block";
Given this, you could easily add an IF statement depending on what condition you want. For example:
if(condition)
{
document.getElementById("container").style.display = "block";
}
You can do this with .style.property or .style.cssText
function myStyleFunction() {
document.getElementById('styled').style.color = 'red';
}
function myStyleFunctionCssText() {
document.getElementById('styled2').style.cssText = 'color: lime';
}
<button onclick="myStyleFunction();" id="styled">
Style with .style.color
</button>
<button onclick="myStyleFunctionCssText();" id="styled2">
Style with .style.cssText
</button>
With this code, the button on the left will go red, the one on the right will go lime.
You can also do this easily with jQuery.
function myStyleFunction() {
$(".style").css("color", "magenta");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="style" onclick="myStyleFunction();">Style by class</button>
<button class="style">Style by class 2</button>
This code changes all elements in the classes color to magenta if you click the first button.
function barHtml (percent) {
return `
<div class= "${percent>25 ? "class1":" class2"}"
style="width: ${percent}%;">
</div>`
}
document.body.innerHTML=<div>${barHtml(20)}</div>

how to find some element has child as div in javascript or jquery?

i have a below code.I have tried in several ways by myself..but i can't get it properly.
<div id="div1">
<canvas></canvas>
<div>
</div>
</div>
i need to do is. that is first i need to check whether the div has child div. and if it has child div then need to add span in that. if it don't have child div means need to add child div and need t add span in that.
if($("#div1").has child div)
{
do nothing
}
else{
add div
}
In some other instance, i need to add some span in the the inner div..
please help me..
thanks in advance..
if($('#div').children().find('div').length)
{
}
else
{
$('#div').append('<div>Hi</div>');
}
if ($('#div1').find('div').length) {
} else {
}
This is the JavaScript code you need:
// If no child DIV, add one
if ($("#div1 > div").size() == 0) {
$("#div1").append('<div></div>');
}
// Append a span to the child DIV
$("#div1 > div").append('<span>This is a span.</span>');
DEMO with child DIV:
if ($("#div1 > div").size() == 0) {
$("#div1").append('<div></div>');
}
$("#div1 > div").append('<span>This is a span.</span>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div1">
<canvas></canvas>
<div></div>
</div>
DEMO without child DIV:
if ($("#div1 > div").size() == 0) {
$("#div1").append('<div></div>');
}
$("#div1 > div").append('<span>This is a span.</span>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="div1">
<canvas></canvas>
</div>
if ( $('#div1').find('div').size() != 0 ) {
} else {
}
see demo try this
<div id="div1">
<canvas></canvas>
<div></div> <!-- check also after removing this -->
</div>
(function(){
var nestDiv = $('#div1').children('div').length;
if(nestDiv>0){
$('#div1').children('div').append($('<span></span>',{
text:'Hello',
class: 'nestSpan'
}));
}else{
$('#div1').append($('<div><span>hello from double nested</span></div>'));
}
})()
see the code below:-
$(document).ready(function() {
var mainDiv = $('#div1');
if (mainDiv.find('div').length) {
mainDiv.find('div').append("<span>").text("dev");
} else {
mainDiv.append("<div>").append("<span>").text("dev");
}
});
and i have created a jsfiddle example for you:-
http://jsfiddle.net/c2S5d/11/
you can edit to see the functionality like append the div to it...

I can't get all the div's to show up with the same #id

http://jsfiddle.net/bDQt7/4/
This doesn't work, hello2 and hello3 won't show up. It has to do with the '#id can only be used once' ? Changing it to class doesn't work, how to fix this?
HTML
Toggle
<div id="menu" class="hidden">hello</div>
<div id="menu" class="hidden">hello2</div>
<div id="menu" class="hidden">hello3</div>
CSS
.hidden {
display: none;
}
.unhidden {
display: block;
}
JS
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className = (item.className == 'hidden') ? 'unhidden' : 'hidden';
}
}
IDs must be unique.
Try this:
HTML:
<div class="hidden">hello</div>
<div class="hidden">hello2</div>
<div class="hidden">hello3</div>
JS:
$(document).ready(function(){
$("a").click(function(){
$("div").toggleClass("hidden unhidden");
});
});
Fiddle here.
A Jquery solution for you, I just replaced your id with another unique class. Just refer the code below to get a grip over it.
HTML
Toggle
<div class="xTest hidden">hello</div>
<div class="xTest hidden">hello2</div>
<div class="xTest hidden">hello3</div>
JQUERY
$("a").click(function(){
var xObj = $(".xTest");
if(xObj.hasClass("hidden"))
{
xObj.removeClass("hidden").addClass("unhidden");
}
else
{
xObj.removeClass("unhidden").addClass("hidden");
}
});
DEMONSTRATION
Why don't your wrap all your divs inside another div?
http://jsfiddle.net/bDQt7/7/
it has more sense to have menu and items inside it (I guess you need anchors and not divs inside the menu div)
That way you don't need jquery if you still don't know what it is.
<div id='menu' class='hidden'>
<a href='#'>menu</a>
<a href='#'>menu2</a>
<a href='#'>menu3</a>
</div>

Categories

Resources