I have a small thing I have to make. I need to give a CSS class to a div and this has to change the insides of the div. But my button doesn't execute the onclick or something. I don't get errors in the console.
function Naampie(){
document.getElementById("ja").className += " pasta-di-mama";
}
Naampie();
.pasta-di-mama{
color: red;
font-size: 2em;
}
<!DOCTYPE html>
<html>
<head>
<title>Javascript Stuff</title>
</head>
<body>
<div id="ja">
<p>Spaghetti</p>
<p>Macaroni</p>
<p>MI</p>
<p>Pasta Kip</p>
<p>Pasta Salade</p>
</div>
<button onclick="Naampie()">Functie</button>
<!--<script src="script.js" type="text/javascript"></script>-->
</body>
</html>
Does anyone have an idea why this isn't working?
You're missing the . in your CSS declaration to target the class. I'd also recommend using classList.add instead of appending to the className.
function Naampie() {
document.getElementById("ja").classList.add("pasta-di-mama");
}
Naampie();
.pasta-di-mama {
color: red;
font-size: 2em;
}
<div id="ja">
<p>Spaghetti</p>
<p>Macaroni</p>
<p>MI</p>
<p>Pasta Kip</p>
<p>Pasta Salade</p>
</div>
<button onclick="Naampie()">Functie</button>
Try classList.add(). You also forgot to precede the class with dot (.) in CSS. I will also recommend not use inline event handler:
function Naampie(){
document.getElementById("ja").classList.add("pasta-di-mama");
}
document.getElementById('myBtn').addEventListener('click', Naampie);
.pasta-di-mama{
color: red;
font-size: 2em;
}
<div id="ja">
<p>Spaghetti</p>
<p>Macaroni</p>
<p>MI</p>
<p>Pasta Kip</p>
<p>Pasta Salade</p>
</div>
<button id="myBtn">Functie</button>
You can use classList.add("className")
function Naampie(){
document.getElementById("ja").classList.add("pasta-di-mama");
}
Naampie();
.pasta-di-mama{
color: red;
font-size: 2em;
}
<!DOCTYPE html>
<html>
<head>
<title>Javascript Shit</title>
</head>
<body>
<div id="ja">
<p>Spaghetti</p>
<p>Macaroni</p>
<p>MI</p>
<p>Pasta Kip</p>
<p>Pasta Salade</p>
</div>
<button onclick="Naampie()">Functie</button>
</body>
<script src="script.js" type="text/javascript"></script>
</html>
Try add Class
function Naampie(){
document.getElementById("ja").classList.add("pasta-di-mama");
}
Another way of doing it...add an event listener to the btn.
document.getElementById("myBtn").addEventListener("click", function() {
document.getElementById("ja").classList.add("pasta-di-mama");
});
.pasta-di-mama {
color: red;
font-size: 2em;
}
<div id="ja">
<p>Spaghetti</p>
<p>Macaroni</p>
<p>MI</p>
<p>Pasta Kip</p>
<p>Pasta Salade</p>
</div>
<button id="myBtn">Functie</button>
Related
I have the following:
<div id="ext">01</div>
How do I add a button that changes the color of the div to some color on click and changes it back on click again?
You can add a click event listener on a button that toggles a class which applies a color:
$(btn).on('click', function(){ $(ext).toggleClass('with-color') })
.with-color{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ext">01</div>
<button id="btn">Toggle Color</button>
If you prefer a solution without jQuery:
btn.addEventListener('click', function(){
ext.classList.toggle('with-color');
})
.with-color{
color:red;
}
<div id="ext">01</div>
<button id="btn">Toggle Color</button>
If you want the button to be able to toggle the class once, you can store the times the button has been clicked and stop toggling when it is clicked more than twice:
var count = 0;
$(btn).on('click', function() {
if (count != 2) $(ext).toggleClass('with-color'), count++
})
.with-color {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ext">01</div>
<button id="btn">Toggle Color</button>
If you have multiple numbers, just get the closest previous div on button click:
$(btn).on('click', function(){ $(this).prev('div').first().toggleClass('with-color') })
.with-color{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ext">01</div>
<button id="btn">Toggle Color</button>
<div id="ext">02</div>
<button id="btn">Toggle Color</button>
<div id="ext">03</div>
<button id="btn">Toggle Color</button>
or for a full case here with jquery
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn").click(function(){
$("#ext").toggleClass("yourColor");
});
});
</script>
<style>
.yourColor{
background-color: green;
color:blue;
}
</style>
</head>
<body>
<div id="ext" class="">01</div>
<button id="btn">toggle</button>
</body>
</html>
I'm trying to execute a function by clicking on a span, but it tells me that it is undefined.
$(document).ready(function() {
function callTo(param) {
alert(param);
}
});
.file-up {
background: #f5f5f5 none repeat scroll 0 0;
border: 1px solid #ccc;
color: #383f45;
font-size: 12px;
margin-bottom: 10px;
padding: 6px;
font-size: 10px;
text-align: center;
text-transform: uppercase;
cursor: pointer;
}
<div>
<span class="file-up" onclick="callTo('test')">Click to call</span>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>
sample
</title>
</head>
<body>
<script>
function callTo(param) {
alert(param);
}
</script>
<div>
<span class="file-up" id="index" onclick="callTo('test')">
Click to call
</span>
</div>
</body>
This is a working example without using jQuery, just by vanilla javascript. Insert it and use it directly.
If you want me to post an answer which uses only jQuery for the stated task that you want to accomplish then please let me know.
This is code using jQuery, as you asked -
<!DOCTYPE html>
<html>
<head>
<title>
sample
</title>
</head>
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#index').click (function callTo() {
alert("Your values is :"+ $(this).data("value"));
});
});
</script>
<div>
<span class="file-up" id="index" data-value="test">
Click to call
</span>
</div>
Try to move your function definition away from $(documents).ready
<script>
function callTo(param) {
alert(param);
}
</script>
Or define event listener like
<script>
$(document).ready(function() {
$('.file-up').click(function() {
//action
});
});
</script>
(I'd better give it an id in this case and change the selector to #id instead of .file-up because other elements can have the same class applied)
i try to make a trigger button from a div children with the same class,but my code below seems not working properly, i try to make a looping at first to get the class box then try to get the children from each box, but it seems not working.
var container = document.querySelector(".container");
var box = document.getElementsByClassName("box");
for(var i = 0; i < box.length; i++){
var x = box[i].children;
x.addEventListener("click", function(){
console.log('hello world')
})
}
.container {
border: 1px solid black;
padding: 10px;
}
.box {
width: 100px;
height: 100px;
background: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="box">
<button class="btn">click me</button>
</div>
<div class="box">
<button class="btn">click me</button>
</div>
<div class="box">
<button class="btn">click me</button>
</div>
<div class="box">
<button class="btn">click me</button>
</div>
</div>
</body>
</html>
box[i].children is returning a collection (see https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/children )
You need to loop over it to get each nodes.
Or better, access the node you want using querySelector :
var container = document.querySelector(".container");
var box = document.getElementsByClassName("box");
for(var i = 0; i < box.length; i++){
var button = box[i].querySelector('button');
button.addEventListener("click", function(){
console.log('hello world')
})
}
.container {
border: 1px solid black;
padding: 10px;
}
.box {
width: 100px;
height: 100px;
background: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="box">
<button class="btn">click me</button>
</div>
<div class="box">
<button class="btn">click me</button>
</div>
<div class="box">
<button class="btn">click me</button>
</div>
<div class="box">
<button class="btn">click me</button>
</div>
</div>
</body>
</html>
try to make a looping at first to get the class box then try to get
the children from each box, but it seems not working.
children returns List of Elements, you need to access the first one (button)
var x = box[i].children[0];
Demo
var container = document.querySelector(".container");
var box = document.getElementsByClassName("box");
for(var i = 0; i < box.length; i++){
var x = box[i].children[0];
x.addEventListener("click", function(){
console.log('hello world')
})
}
.container {
border: 1px solid black;
padding: 10px;
}
.box {
width: 100px;
height: 100px;
background: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="box">
<button class="btn">click me</button>
</div>
<div class="box">
<button class="btn">click me</button>
</div>
<div class="box">
<button class="btn">click me</button>
</div>
<div class="box">
<button class="btn">click me</button>
</div>
</div>
</body>
</html>
Note
If there are multiple buttons inside each box, then you need to iterate children.
If you use querySelectorAll you can simplify that a lot.
querySelectorAll takes a CSS selector as a parameter and makes it very easy to narrow the nodelist down to just the elements you want, e.g. the button's.
Stack snippet
var buttons = document.querySelectorAll(".container .box button");
for(var i = 0; i < buttons.length; i++){
buttons[i].addEventListener("click", function(){
console.log('hello world')
})
}
.container {
border: 1px solid black;
padding: 10px;
}
.box {
width: 100px;
height: 100px;
background: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="box">
<button class="btn">click me</button>
</div>
<div class="box">
<button class="btn">click me</button>
</div>
<div class="box">
<button class="btn">click me</button>
</div>
<div class="box">
<button class="btn">click me</button>
</div>
</div>
</body>
</html>
Or like this, using the btn class
Stack snippet
var buttons = document.querySelectorAll(".container .btn");
for(var i = 0; i < buttons.length; i++){
buttons[i].addEventListener("click", function(){
console.log('hello world')
})
}
.container {
border: 1px solid black;
padding: 10px;
}
.box {
width: 100px;
height: 100px;
background: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="box">
<button class="btn">click me</button>
</div>
<div class="box">
<button class="btn">click me</button>
</div>
<div class="box">
<button class="btn">click me</button>
</div>
<div class="box">
<button class="btn">click me</button>
</div>
</div>
</body>
</html>
children method returns an array of matching elements, you have to specify to which element you want to addEventListened, even if it's one child you need to indicate x[0].addEventListener()
That suppose to work for any amount of children inside:
var container = document.querySelector(".container");
var box = document.getElementsByClassName("box");
for(var i = 0; i < box.length; i++){
var x = box[i].children;
for (let i=0; i < x.length; i++) {
x[i].addEventListener("click", function(){
console.log('hello world')
})
}
}
I am trying to build a tag cloud: When I click on a tag, the required functons runs three times, as in 3,2,1, or 2,1 instead of only one time.
This happens both on the jquery version and on plain js. What do I'm missing?
This is a very simple code, and I'm stuck on it:
.cloud .weight-1 { font-size: 10px; }
.cloud .weight-2 { font-size: 25px; }
.cloud .weight-3 { font-size: 35px; }
<!DOCTYPE html>
<html>
<head>
<title>Exercise</title>
<link rel="stylesheet" type="text/css" href="2.css">
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
</head>
<body>
<div class="cloud">
<div id="firstword" class="weight-1" onclick="func1()">Cloud1</a>
<div id="secondword" class="weight-2" onclick="func2()">Cloud2</a>
<div id="thirdword" class="weight-3" onclick="func3()">Cloud3</a>
</div>
<div>
<foo class="bar">
<foo id="ba"></foo>
</foo>
</div>
<script type="text/javascript">
$(function()
{
$("#firstword").click(function()
{
alert("first.");
});;
$("#secondword").click(function(){
alert("second.");
});;
$("#thirdword").click(function(){
alert("third.");
});;
});
/*function func3(){
alert("3");
};
function func1(){
alert("1");
}
;
function func2(){
alert("2");
};*/
</script>
</body>
</html>
You're getting this error because you haven't closed your divs properly.
You need to do this:
<div class="cloud">
<div id="firstword" class="weight-1" onclick="func1()">Cloud1</div>
<div id="secondword" class="weight-2" onclick="func2()">Cloud2</div>
<div id="thirdword" class="weight-3" onclick="func3()">Cloud3</div>
</div>
Here's a jsFiddle to show this is all you need to change - https://jsfiddle.net/eyd5b0ku/
The HTML close tag is not correct. Changing it will work.
.cloud .weight-1 { font-size: 10px; }
.cloud .weight-2 { font-size: 25px; }
.cloud .weight-3 { font-size: 35px; }
<!DOCTYPE html>
<html>
<head>
<title>Exercise</title>
<link rel="stylesheet" type="text/css" href="2.css">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div class="cloud">
<div id="firstword" class="weight-1" onclick="func1()">Cloud1</div>
<div id="secondword" class="weight-2" onclick="func2()">Cloud2</div>
<div id="thirdword" class="weight-3" onclick="func3()">Cloud3</div>
</div>
<div>
<foo class="bar">
<foo id="ba"></foo>
</foo>
</div>
<script type="text/javascript">
$(function(){
$("#firstword").click(function(){
alert("first.");
});;
$("#secondword").click(function(){
alert("second.");
});;
$("#thirdword").click(function(){
alert("third.");
});;
});
function func3(){
alert("3");
};
function func1(){
alert("1");
}
;
function func2(){
alert("2");
};
</script>
</body>
</html>
Should work fine now
$(function() {
$("#firstword").click(function(e) {
alert("first.");
});;
$("#secondword").click(function(e) {
e.stopPropagation();
alert("second.");
});;
$("#thirdword").click(function(e) {
e.stopPropagation();
alert("third.");
});;
});
.cloud .weight-1 {
font-size: 10px;
}
.cloud .weight-2 {
font-size: 25px;
}
.cloud .weight-3 {
font-size: 35px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cloud">
<div id="firstword" class="weight-1">Cloud1</a>
<div id="secondword" class="weight-2">Cloud2</a>
<div id="thirdword" class="weight-3">Cloud3</a>
</div>
<div>
<foo class="bar">
<foo id="ba"></foo>
</foo>
</div>
I want to make an Angular-driven page where input tags are bound to h3 tags in other DIVs.
Here's what my HTML looks like (with Plunker):
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.square {
background-color: #ccc;
height: 200px;
width: 200px;
margin: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.js"></script>
<script type="text/javascript">
var app= angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.items= [
{value: ''}
];
$scope.squares= [
{value:''}
];
$scope.addSomething= function(){
$scope.items.push({value:''});
$scope.squares.push({value:''});
};
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<button id="button" ng-click="addSomething()">click me</button>
<div ng-repeat="item in items">
<input type="text" placeholder="Headline" ng-model="item.value">
</div>
<div ng-repeat="square in squares">
<div class="square">
<h3>{{item.value}}</h3>
</div>
</div>
</body>
</html>
Problem: The stuff I type into the input tag does not show up into corresponding h3 tags. When I type into the first input tag, I want the words written to appear in the first h3 tag, and so on for the second, third, etc... But this does not happen.
How do I fix this?
If you want the input to bind to the h3 tag you must bind them to the same array .i.e you don't need both a items array and a squares array.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.square {
background-color: #ccc;
height: 200px;
width: 200px;
margin: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.js"></script>
<script type="text/javascript">
var app= angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.items= [
{value: ''}
];
$scope.addSomething= function(){
$scope.items.push({value:''});
};
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<button id="button" ng-click="addSomething()">click me</button>
<div ng-repeat="item in items">
<input type="text" placeholder="Headline" ng-model="item.value">
</div>
<div ng-repeat="item in items">
<div class="square">
<h3>{{item.value}}</h3>
</div>
</div>
</body>
</html>