I have this code for toggling class using pure JavaScript that I found online and it is not working when I am using it in an offline website
my code is -
<!DOCTYPE html>
<html>
<head>
<script>
function classToggle() {
this.classList.toggle('class1');
this.classList.toggle('class2');
}
document.querySelector('#div').addEventListener('click', classToggle);
</script>
<style type="text/css">
.class1 {
color: #f00;
}
.class2 {
color: #00f;
}
</style>
</head>
<body>
<div id="div" class="class1">click here</div>
</body>
</html>
any help would be appreciated
Move the script below the div you are looking for in the source code.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.class1 {
color: #f00;
}
.class2 {
color: #00f;
}
</style>
</head>
<body>
<div id="div" class="class1">click here</div>
<script>
function classToggle() {
this.classList.toggle('class1');
this.classList.toggle('class2');
}
document.querySelector('#div').addEventListener('click', classToggle);
</script>
</body>
</html>
You cannot manipulate the dom before it is ready.
So either load the script that adds the handler at the end of the body tag, or use the DOMContentLoaded event.
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
Try adding the event handler after the div has rendered - for example in the onload event
Live Demo
<!DOCTYPE html>
<html>
<head>
<script>
function classToggle() {
if (!this.classList) return; // no support
this.classList.toggle('class1');
this.classList.toggle('class2');
}
window.onload=function() {
document.getElementById('div').onclick=classToggle;
}
</script>
<style type="text/css">
.class1 {
color: #f00;
}
.class2 {
color: #00f;
}
</style>
</head>
<body>
<div id="div" class="class1">click here</div>
</body>
</html>
codepen demo
//vanilla js -- toggle active class
// el = object containing the elements to toggle active class and the parent element
var el = {
one: document.getElementById('one'),
two: document.getElementById('two'),
three: document.getElementById('three'),
hold: document.getElementById('hold')
};
// func = object containing the logic
var func = {
toggleActive: function(ele) {
ele = event.target;
var hold = el.hold.children;
var huh = el.hold.children.length;
var hasActive = ele.classList.contains('active');
for (i = 0; i < huh; i++) {
if (hold[i].classList.contains('active')) {
hold[i].classList.remove('active');
}
}
if (!hasActive) {
ele.classList.add('active');
}
}
};
//add listeners when the window loads
window.onload = function() {
var holdLen = el.hold.children.length;
for (i = 0; i < holdLen; i++) {
el.hold.children[i].addEventListener("click", func.toggleActive);
}
};
Related
This question already has answers here:
$(document).ready equivalent without jQuery
(39 answers)
Attach a body onload event with JS
(7 answers)
Closed 3 years ago.
How to add myFunction() in head that runs only after the body has been loaded. The reason I want to have it inside head is because that way I could put it in only one file instead of multiple.
Currently I have <body onload="myFunction()"></body> which works perfectly. But this needs to be added to multiple files.
Example
<head>
<style>
.codetext {
font-family: monospace;
}
</style>
<script>
myFunction = function () {
let links = document.querySelectorAll("a");
links.forEach(elem => elem.classList.add("codetext"));
}
document.body.onload("myFunction"); <!--Doesn't Work-->
</script>
</head>
<body>
Click Here
</body>
You can use global load event
<script>
onload = _ =>
document.querySelectorAll("a").forEach(elem => elem.classList.add("codetext"))
</script>
You can use
document.querySelector('body').onload
<head>
<style>
.codetext {
font-family: monospace;
}
</style>
<script>
document.querySelector('body').onload= function myFunction() {
let links = document.querySelectorAll("a");
links.forEach(elem => elem.classList.add("codetext"));
}
//document.body.onload("myFunction"); <!--Doesn't Work-->
</script>
</head>
<body>
Click Here
</body>
TypeError: document.body.onload is not a function
you need to assign your function to onload : document.body.onload = myFunction;
<head>
<style>
.codetext {
font-family: monospace;
color: red;
}
</style>
<script>
myFunction = function() {
let links = document.querySelectorAll("a");
links.forEach(elem => elem.classList.add("codetext"));
}
document.body.onload = myFunction;
</script>
</head>
<body>
Click Here
</body>
Use document.body.onload = handler. See this answer for more details.
<head>
<style>
.codetext {
font-family: monospace;
}
</style>
<script>
document.body.onload = () => {
const links = document.querySelectorAll('a');
links.forEach(elem => elem.classList.add('codetext'));
}
</script>
</head>
<body>
Click Here
</body>
Or you can use window.onload = handler.
Use
document.body.addEventListener("load",functionToAssingn)
to add onLoad event:
<head>
<style>
.codetext {
font-family: monospace;
}
</style>
<script>document.body.addEventListener("load",myFunction)
myFunction = function () {
let links = document.querySelectorAll("a");
links.forEach(elem => elem.classList.add("codetext"));
}
</script>
</head>
<body>
Click Here
</body>
Overview of the code: This code consists of an editable div section. Below the div, there is a button which creates a span element, inserts the text "tag" in the span element and finally appends the span element in that editable div
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
#sample-div
{
border-style: solid;
border-width: 1px;
border-color: black;
height:100px;
overflow: auto;
}
</style>
<script type="text/javascript">
function addTags()
{
var tag = document.createElement("span");
tag.className = "$(tag)"
tag.innerHTML = "tag";
tag.contentEditable = false;
$('#sample-div').append(tag);
}
$(document).ready(function(){
$('span').keyup(function(){
if(!this.value)
{
alert('this is empty');
}
});
});
</script>
</head>
<body>
<div id="sample-div" contenteditable="true"></div>
<input type="button" value="date" id="sample-tags" onclick="addTags()">
</body>
</html>
General observation: When I type something inside the div and then click on the button, the HTML DOM will change as:
<div id="sample-div" contenteditable="true">
this is a <span class="$(tag)" contenteditable="false">tag</span>
</div>
Please note that the text "this is a", is provided by me when I type inside the div element. "tag" appears when I click on the input button
Expectation / Trying to achieve: When I delete the text in the span, the DOM will change as:
<div id="sample-div" contenteditable="true">
this is a
</div>
So, my aim is to get the information that the element span is removed when I delete the text in span. I am trying to achieve that by doing the following, which is not correct:
$(document).ready(function(){
$('span').keyup(function(){
if(!this.value)
{
alert('this is empty');
}
});
});
So, my question is how do I get the message "this is empty" when the DOM removes the span element?
You could use a variable as a "tag" counter.
When the amount tags present in the div gets lower than the tag counter, that is when one got deleted.
var tagCount = 0;
function addTags(){
var tag = document.createElement("span");
tag.className = "$(tag)"
tag.innerHTML = "tag";
tag.contentEditable = false;
$('#sample-div').append(tag);
// Increment tagCount
tagCount++;
}
$(document).ready(function(){
$('#sample-div').keyup(function(){
if($(this).find("span").length < tagCount){
alert('One tag was removed');
// Decrement tagCount
tagCount--;
}
});
}); // Ready
#sample-div{
border-style: solid;
border-width: 1px;
border-color: black;
height:100px;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sample-div" contenteditable="true"></div>
<input type="button" value="date" id="sample-tags" onclick="addTags()">
You probably should use MutationObserver
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#sample-div
{
border-style: solid;
border-width: 1px;
border-color: black;
height:100px;
overflow: auto;
}
</style>
</head>
<body>
<div id="sample-div" contenteditable="true"></div>
<input type="button" value="date" id="sample-tags" onclick="addTags()">
<script type="text/javascript">
'use strict';
function addTags()
{
var tag = document.createElement("span");
tag.className = "$(tag)"
tag.innerHTML = "tag";
tag.contentEditable = false;
document.getElementById('sample-div').appendChild(tag);
}
function onTagRemoved(node)
{
alert(`node ${node.tagName}.${node.className} removed`);
}
//
// https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
//
// select the target node
let target = document.querySelector('#sample-div');
// create an observer instance
let observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
// console.log(mutation);
let node = null;
for (var i = 0; i < mutation.removedNodes.length; i++) {
node = mutation.removedNodes[i];
if (/span/i.test(node.tagName)) {
onTagRemoved(node);
}
}
});
});
// configuration of the observer:
let config = { attributes: false, childList: true, characterData: false }
// pass in the target node, as well as the observer options
observer.observe(target, config);
// later, you can stop obser
// observer.disconnect();
</script>
</body>
</html>
Tested on Firefox 52
I want to change the background color if width is bigger than 100.
This is my code but it doesn't work.
Thanks for any help!
<html>
<head>
<style type="text/css">
div#mydiv {
width: 200px;
height: 100px;
background-color: red;
}
</style>
<script language="JavaScript">
function () {
var mydiv = document.getElementById("mydiv");
var curr_width = parseInt(mydiv.style.width);
if (curr_width > 100) {
mydiv.style.BackgroundColor = "blue";
}
}
</script>
</head>
<body>
<div id="mydiv" style=""></div>
</body>
</html>
Change
parseInt(mydiv.style.width);
mydiv.style.BackgroundColor = "blue";
To
mydiv.offsetWidth
mydiv.style.backgroundColor = "blue";
use
var curr_width = mydiv.offsetWidth;
instead
var curr_width = parseInt(mydiv.style.width);
Change:
var curr_width = parseInt(mydiv.style.width);
mydiv.style.BackgroundColor = "blue";
to:
var curr_width = mydiv.offsetWidth;
mydiv.style.backgroundColor = "blue";
I have set up a fiddle here.
Also notice I took it out of the function because it looked like it wasn't being called anywhere. You should also move the script out of the head to the bottom of the body tag or use window.onload.
UPDATE
Another fiddle with everything together
I assume this is a duplicate question.
Anyway, your intialization of curr_width need not include parseInt.
parseInt is for converting a value to integer type and here you doesnt require it.
Your code can be re-written as
<html>
<head>
<style type="text/css">
div#mydiv {
width: 200px;
height: 100px;
background-color: red;
}
</style>
<script language="JavaScript">
function () {
var mydiv = document.getElementById("mydiv");
var curr_width = mydiv.offsetWidth;
if (curr_width > 100) {
mydiv.style.BackgroundColor = "blue";
}
}
</script>
</head>
<body>
<div id="mydiv" style=""></div>
</body>
</html>
Assuming your function to be called onload. Here's the code:
<html>
<head>
<style type="text/css">
#mydiv {
width: 200px;
height: 100px;
background-color: red;
}
</style>
<script language="JavaScript">
function load(){
var mydiv = parseInt(document.getElementById("mydiv").offsetWidth);
if (mydiv > 100) {
document.getElementById("mydiv").style.backgroundColor = "blue";
}
}
</script>
</head>
<body onload="load();">
<div id="mydiv" style=""></div>
</body>
</html>
Changes:
Use offsetWidth to get the width of the div.
Use backgroundColor instead of BackgroundColor.
To get a proper computed width, you need to use the (not enough used) method getBoundingClientRect() https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect
Latest browsers have .width property, otherwise you just need to take right - left to get it.
Some comments:
- language="JavaScript" is useless. Like type="text/javascript". It's the default behavior. Seriously.
- you need to execute your code after the div has been created. So using onload or just by calling the code after in the html (like in my example)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#mydiv {
width: 200px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="mydiv"></div>
<script>
/* run the code after the creation of #mydiv */
var mydiv = document.getElementById("mydiv");
var clientRect = mydiv.getBoundingClientRect()
var curr_width = clientRect.width || (clientRect.right - clientRect.left);
if (curr_width > 100) {
mydiv.style.backgroundColor = "blue";
}
</script>
</body>
</html>
Here is a working example http://jsbin.com/xapet/1/edit
Warning: to do this properly it's recommended that you execute this code each time the browser is resized.
Maybe you can take a look to the "element queries" thing, that will be a nice workaround according to media queries limitations.
https://encrypted.google.com/search?hl=en&q=element%20queries%20css
I'm facing such problem. I have div with class oldClass and function that toggle div's class on click. When the class changed clicking on div should trigger other function and call alert, however this behavior doesn't appear and it seems like previous function is called again. I'm quite new in jQuery, so what am I missing?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.oldClass').on('click',function(){
$(this).toggleClass('oldClass').toggleClass('newClass');
});
});
$(function(){
$('.test').on('click',function(){
alert('1111');
});
});
</script>
<style>
.oldClass {
border: 1px solid red;
}
.newClass {
border: 3px solid green;
}
</style>
</head>
<body>
<div class="oldClass" title="qwerty">qwerty
</div>
<body>
</html>
Here you go! You have to subscribe and unsubscribe to events. I'm new to jQuery as well and it might be not the clearest solution, but it works. If anyone can suggest a better solution, you are welcome.
var subNewClass = function () {
$('.newClass').off().on('click', function () {
alert('1111');
});
};
var subOldClass = function () {
};
$(function () {
$('.oldClass').off().on('click', function () {
$(this).toggleClass('oldClass').toggleClass('newClass');
$('.newClass').off().on('click', func);
});
});
.oldClass {
border: 1px solid red;
}
.newClass {
border: 3px solid green;
}
<div class="oldClass" title="qwerty">qwerty</div>
You're declaring document.ready twice ... $(function(){}); is a shortand for $(document).ready(); and not a javascript function declaration ...
To create a function you should first do function foo(){ /* content goes here */ }; or var foo = function(){ /* content goes here */ }; ant then call it whenever you want by writing foo();
Read more about JS functions here
Check this to see how this should work: JSFIDDLE DEMO
var alertTrigger = function (){
$('.newClass').on('click',function(){
$(this).toggleClass('oldClass').toggleClass('newClass');
alert('1111');
});
}
$(function(){
$('.oldClass').on('click',function(){
$(this).toggleClass('oldClass').toggleClass('newClass');
alertTrigger();
});
});
Like the below code, the implementation of a custom element is imported.
And is naked, which means, the imported document has no body and head.
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="import" href="html/demo-element.html">
</head>
<body>
<demo-element>hello world</demo-element>
</body>
</html>
demo-element.html
<template>
<style type="text/css">
div {
background-color: #F2CEE5;
padding: 10px;
}
</style>
<div>
<content></content>
</div>
</template>
<script type="text/javascript">
(function() {
var thisDoc = document.currentScript.ownerDocument;
var proto = Object.create(HTMLElement.prototype, {
createdCallback: {
value: function() {
var t = thisDoc.querySelector('template');
var clone = document.importNode(t.content, true);
this.createShadowRoot().appendChild(clone);
}
}
});
var element = document.registerElement('demo-element', {
prototype: proto
});
})();
</script>
I want you see the below which is the result which chrome dev tool shows.
The imported document has head and body and the implementation is in head somehow.
I want to know if this is common or I should write head and body in demo-element.html and put the implementation in the body.