How do I show myFunction content in myDiv div? So show "Example"?
function myFunction() {
document.getElementById("demo").innerHTML = "Example!";
}
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
<div class="myDiv">
<p id="demo"></p>
</div>
This code:
<div class="myDiv">
<p> id="demo"</p>
</div>
Should be this:
<div class="myDiv">
<p id="demo"></p>
</div>
With the id tag inside <p>
And this:
function myFunction() {
document.getElementById("demo").innerHTML = "Example!";
}
Should also get called since it is a function and not just the document.getElementById("demo").innerHTML = "Example!";
Example 1:
function myFunction() {
document.getElementById("demo").innerHTML = "Example!";
}
myFunction();
function myFunction() {
document.getElementById("demo").innerHTML = "Example!";
}
myFunction();
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
<div class="myDiv">
<p id="demo"></p>
</div>
Example 2:
document.getElementById("demo").innerHTML = "Example!";
document.getElementById("demo").innerHTML = "Example!";
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
<div class="myDiv">
<p id="demo"></p>
</div>
You can solve this just by using the getElementById no need for a function.
document.getElementById("demo").innerHTML = "Example!";
.myDiv {
border: 5px outset red;
background-color: lightblue;
text-align: center;
}
<div class="myDiv">
<p id="demo"><p>
</div>
I think you are not clear about the concept of html,CSS and js.myDiv is a CSS class.You can beatify the class in it.Whatever html tag uses that class will integrate the proper of .myDiv class. myFunction() is a js function if you use the demo id in your html tag and it will act according to your function defination.
Related
I am trying to add / remove a class on an element that is clicked liek this
function myFunction() {
this.classList.add("myclass");
}
#first {
height: 100px;
width: 100px;
background: yellow;
color: black;
}
.myclass {
background: red;
color: white;
}
<div id="first" onclick="myFunction(this)">
Click
<div class="second">
</div>
<div class="third">
</div>
</div>
Why is this not working?
You need to pass reference this into function too like:
function myFunction(el) {
el.classList.add("myclass");
}
#first {
height: 100px;
width: 100px;
background: yellow;
color: black;
}
.myclass {
background: red!important;
color: white!important;
}
<div id="first" onclick="myFunction(this)">
Click
<div class="second">
</div>
<div class="third">
</div>
</div>
PS. add !important into css
Pass the this to the defined function too and check the existence of the class. Try this.
function myFunction(el) {
if(!el.classList.contains("myclass")) {
el.classList.add("myclass");
console.log("added");
} else {
el.classList.remove("myclass");
console.log("removed");
}
}
#first {
height: 100px;
width: 100px;
background: yellow;
color: black;
}
.myclass {
background: red;
color: white;
}
<div id="first" onclick="myFunction(this)">
Click
<div class="second">
</div>
<div class="third">
</div>
</div>
It doesn't work because this for inline handlers works differently. You can use .call, and that works... but that's still not good.
function myFunction() {
this.classList.add("myclass");
}
#first {
height: 100px;
width: 100px;
background: yellow;
color: black;
}
.myclass {
background: red !important;
color: white;
}
<div id="first" onclick="myFunction.call(this)">
Click
<div class="second">
</div>
<div class="third">
</div>
</div>
You should avoid inline script altogether and also avoid id selectors in CSS.
Change your id selector to a class selector and change your inline handler to an event listener.
Also, stray strings like "content" are a real pain as your project grows in size. Wrap them in a <span>
const myButton = document.querySelector(".first");
myButton.addEventListener("click", ({
target
}) => target.classList.add("myclass"))
.first {
height: 100px;
width: 100px;
background: yellow;
color: black;
}
.myclass {
background: red;
color: white;
}
<div class="first">
<span>Click</span>
<div class="second"></div>
<div class="third"></div>
</div>
You are facing 2 issues :
you pass this as a parameter to the onclick event, but don't get it in the function definition (), so you can fix it like below ;
id selector is more specific than class selector, so it always take precedence. You can use a class instead of an id for first div, and then your css rule works :)
function myFunction(el) {
el.classList.add("myclass");
}
.first {
height: 100px;
width: 100px;
background: yellow;
color: black;
}
.myclass {
background-color: red;
color: white;
}
<div class="first" onclick="myFunction(this);">
Click
<div class="second">
</div>
<div class="third">
</div>
</div>
function select(){
document.getElementById('container').style.border="2px solid red";
}
function pick(){
document.getElementById('container').appendChild(document.getElementById('item'));
}
#container{
height: 100px;
width: 100px;
border: 1px solid black;
}
#item{
height: 50px;
width: 50px;
border: 1px solid black;
background: lightblue;
}
<html>
<body>
<p>Select the container and click the item to put it on the container</p>
<div onclick="select()" id="container">Container</div>
<br><br>
<div id="item" onclick="pick()">Pick me</div>
</body>
</html>
I want to be able to click the item and it goes to the container div and then I click the item again it goes back to its original place. Can I undo this process? Is there a better way to satisfy the same purpose?
You can do this:
function select(){
document.getElementById('container').style.border="2px solid red";
}
// boolean to keep track of the position
var inside = false;
function pick(){
if(!inside) {
document.getElementById('container').appendChild(document.getElementById('item'));
var getMeHere = document.getElementById('getMeBackHere');
}
else {
var pickMe = document.getElementById('container');
document.getElementById('getMeBackHere').appendChild(document.getElementById('item'));
}
inside = !inside;
}
#container{
height: 100px;
width: 100px;
border: 1px solid black;
}
#item{
height: 50px;
width: 50px;
border: 1px solid black;
background: lightblue;
}
<html>
<body>
<p>Select the container and click the item to put it on the container</p>
<div onclick="select()" id="container">Container</div>
<br><br>
<div id = "getMeBackHere"></div>
<div id="item" onclick="pick()">Pick me</div>
</body>
</html>
I would think you could use the parentNode property to check if the item div has the container div as it's parent node, and if it does, append it to the body (or wherever you need it to go). If the item nodes parent is not the container, then append it to the container.
https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode
function select(){
document.getElementById('container').style.border="2px solid red";
}
function pick(){
if(document.getElementById('container').contains(document.getElementById('item')))
{
var item = document.getElementById('item').cloneNode(true);
document.getElementById("container").removeChild(document.getElementById('item'));
document.getElementById('example').appendChild(item);
}
else
document.getElementById('container').appendChild(document.getElementById('item'));
}
#container{
height: 100px;
width: 100px;
border: 1px solid black;
}
#item{
height: 50px;
width: 50px;
border: 1px solid black;
background: lightblue;
}
<html>
<body id="example">
<p>Select the container and click the item to put it on the container</p>
<div onclick="select()" id="container">Container</div>
<br><br>
<div id="item" onclick="pick()">Pick me</div>
</body>
</html>
I think this is the only way to do that.
var savedElement;
function select(){
document.getElementById('container').style.border="2px solid red";
document.getElementById('container').removeChild(savedElement);
document.getElementById('container').after(savedElement);
}
function pick() {
savedElement = document.getElementById('item');
document.getElementById('container').appendChild(savedElement);
}
#container{
height: 100px;
width: 100px;
border: 1px solid black;
}
#item{
height: 50px;
width: 50px;
border: 1px solid black;
background: lightblue;
}
<html>
<body>
<p>Select the container and click the item to put it on the container</p>
<div onclick="select()" id="container">Container</div>
<br><br>
<div id="item" onclick="pick()">Pick me</div>
</body>
</html>
Another solution:
save a copy for document.getElementById('container').parentNode.innerHTML, even you can save it into one array, then it can support undo one by one step.
then when reset, assigns it back ( if save multiple copies into one array, assign with last copy then pop it).
Like below demo:
let cloned = []
cloned.push(document.getElementById('container').parentNode.innerHTML)
function select(){
cloned.push(document.getElementById('container').parentNode.innerHTML)
document.getElementById('container').style.border="2px solid red";
}
function pick(){
cloned.push(document.getElementById('container').parentNode.innerHTML)
document.getElementById('container').appendChild(document.getElementById('item'))
}
function reset(){
cloned && cloned.length > 0 && (document.getElementById('container').parentNode.innerHTML = cloned[0])
cloned = [cloned[0]]
}
function undo(){
cloned && cloned.length > 0 && (document.getElementById('container').parentNode.innerHTML = cloned[cloned.length-1])
cloned.pop()
}
#container{
height: 100px;
width: 100px;
border: 1px solid black;
}
#item{
height: 50px;
width: 50px;
border: 1px solid black;
background: lightblue;
}
<html>
<body>
<button onclick="reset()">Reset</button>
<button onclick="undo()">Undo</button>
<p>Select the container and click the item to put it on the container</p>
<div onclick="select()" id="container">Container</div>
<br><br>
<div id="item" onclick="pick()">Pick me</div>
</body>
</html>
You can change your 'pick' function to check whether the item is in the container and if it is, append it back to body, like this:
function pick(){
var item = doucumentgetElementById('item');
var container = document.getElementById('container');
if (item.parentElement == container)
{
document.body.appendChild(item);
}
else
{
container.appendChild(item);
}
}
On first click item is moved to the container, on second click it's moved back to the body.
I am wanting to make a text box on a webpage that anyone can edit and also save. So when they refresh the page their text is still there.
Here is the simple code I have so far. I can edit it just haven't figured out how to save it.
<div id="example-one" contenteditable="true">
<style scoped>
#example-one { margin-bottom: 10px; }
[contenteditable="true"] { padding: 10px; outline: 2px dashed #CCC; }
[contenteditable="true"]:hover { outline: 2px dashed #0090D2; }
</style>
<p>Save Text</p>
</div>
Here's a minimal example using localStorage:
<div id="example-one" contenteditable="true">
</div>
<p id="save">Save Text</p>
<script>
document.getElementById("save").addEventListener('click', function(el) {
localStorage.setItem("text", document.getElementById('example-one').innerHTML);
});
window.onload = function() {
var text = localStorage.getItem("text");
document.getElementById('example-one').innerHTML = text;
}
</script>
I have two elements.
if 1 is already toggled on, then when I toggle on 2, 1 should toggle off.
I am still new to javascript, so if someone wuold help please thanks. Right now, when I try to click, nothing happens, if I remove the while loop, then it works. Maybe I have some error in there that I am unsure off, but it looks right base on the logic.
<style>
.mystyle {
width: 300px;
height: 50px;
background-color: coral;
color: white;
font-size: 25px;
}
.newClassName {
width: 400px;
height: 100px;
background-color: lightblue;
text-align: center;
font-size: 25px;
color: navy;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p>Click the button to toggle between two classes.</p>
<button onclick="myFunction()">Try it</button>
<button onclick="myFunction2()">Try it 2</button>
<div id="myDIV" class="mystyle">
I am a DIV element
</div>
<div id="myDIV2" class="mystyle">
I am a DIV element2
</div>
<script>
var x = document.getElementById("myDIV");
var y = document.getElementById("myDIV2");
function myFunction() {
x.classList.toggle("newClassName");
}
function myFunction2() {
y.classList.toggle("newClassName");
}
while (x.classList.contains("newClassName")) {
if (y.classList.contains("newClassName") = true) {
x.classList.toggle("newClassName")；
}
}
</script>
</body>
You mixed up plain JavaScript and jQuery. I rewrote the script. I think this is what you wanted ...
var x = $("#myDIV");
var y = $("#myDIV2");
function myFunction() {
x.toggleClass("newClassName");
if( x.hasClass("newClassName") ) {
y.removeClass("newClassName");
}
}
function myFunction2() {
y.toggleClass("newClassName");
if( y.hasClass("newClassName") ) {
x.removeClass("newClassName");
}
}
.mystyle {
width: 300px;
height: 50px;
background-color: coral;
color: white;
font-size: 25px;
}
.newClassName {
width: 400px;
height: 100px;
background-color: lightblue;
text-align: center;
font-size: 25px;
color: navy;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click the button to toggle between two classes.</p>
<button onclick="myFunction()">Try it</button>
<button onclick="myFunction2()">Try it 2</button>
<div id="myDIV" class="mystyle">
I am a DIV element
</div>
<div id="myDIV2" class="mystyle">
I am a DIV element2
</div>
You don't need the while loop
You mixed plain JS with jQuery.
the code is commented
Working fiddle
EDIT
As pointed out in the comment, my answer should include code so here it is:
Javascript
$(function() { // This part was proposed by eisbehr
var div1 = $('#myDIV');
var div2 = $('#myDIV2');
$('#btn1').click(function() {
div1.toggleClass('newClassName');
if (div2.hasClass('newClassName')) {
div2.removeClass('newClassName');
}
});
$('#btn2').click(function() {
div2.toggleClass('newClassName');
if (div1.hasClass('newClassName')) {
div1.removeClass('newClassName');
}
});
});
HTML
<p>Click the button to toggle between two classes.</p>
<button id="btn1">Try it</button>
<button id="btn2">Try it 2</button>
<div id="myDIV" class="mystyle">
I am a DIV element
</div>
<div id="myDIV2" class="mystyle">
I am a DIV element2
</div>
You may reduce all to only one function because, from MDN:
toggle ( String [, force] )
When only one argument is present: Toggle class value; i.e., if class exists then remove it and return false, if not, then add it and return true.
When a second argument is present: If the second argument is true, add specified class value, and if it is false, remove it.
So the code is:
var x = document.getElementById("myDIV");
var y = document.getElementById("myDIV2");
function myFunction() {
var result = x.classList.toggle("newClassName");
y.classList.toggle("newClassName", !result);
}
.mystyle {
width: 300px;
height: 50px;
background-color: coral;
color: white;
font-size: 25px;
}
.newClassName {
width: 400px;
height: 100px;
background-color: lightblue;
text-align: center;
font-size: 25px;
color: navy;
margin-bottom: 10px;
}
<p>Click the button to toggle between two classes.</p>
<button onclick="myFunction()">Try it</button>
<button onclick="myFunction()">Try it 2</button>
<div id="myDIV" class="mystyle">
I am a DIV element
</div>
<div id="myDIV2" class="mystyle">
I am a DIV element2
</div>
How I am able to toggleClass on elements, but only one can be "toggled" at time.
There is solution (by adding another for loop to disable effect), but in pureJS and I need help to get this work in jQuery.
var elements = document.querySelectorAll("#box");
for ( var i = 0; i < elements.length; i++ ) (function(i){
elements[i].onclick = function() {
for (var j = 0; j < elements.length; j++) {
elements[j].style.border = '';
elements[j].innerHTML = '';
}
elements[i].style.border = "10px solid red";
elements[i].innerHTML = "selected";
};
})(i);
body {background-color: black;}
#box {
background: white;
color: red;
text-align: center;
box-sizing: border-box;
width: 100px;
height: 100px;
display: block;
float: left;
margin: 1%;
}
#box.red{
background: red;
}
<body>
<div id="box"></div>
<div id="box"></div>
<div id="box"></div>
<div id="box"></div>
</body>
And here is jQuery function. In-short, I need that only one box can be red at time and when another is clicked it disable selected one. Exactly like one above in javascript.
$("div#box").click(function(){
$(this).toggleClass("red");
});
body {background-color: black;}
#box {
background: white;
color: red;
text-align: center;
box-sizing: border-box;
width: 100px;
height: 100px;
display: block;
float: left;
margin: 1%;
}
#box.red{
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="box"></div>
<div id="box"></div>
<div id="box"></div>
<div id="box"></div>
</body>
The usual way to do this is to remove the class on all of the other possible 'toggles' before applying the class to the newly selected one, like this:
var boxes = $('div.box');
boxes.click(function(){
boxes.removeClass('red');
$(this).addClass('red');
});
(You should use a class, not an ID any time you have more than one element to apply it to (so I've used .box, not #box).
Another important point is to select the boxes only once, and store them in a variable outside of the click handler. That way, you're not always re-selecting them on every click.
the this, refers to the current clicked element.
you will need to apply it to all the nav items such as below.
var
$boxes = $("div#box").click(function(){
$boxes.removeClass("red");
$(this).addClass("red");
});
body {background-color: black;}
#box {
background: white;
color: red;
text-align: center;
box-sizing: border-box;
width: 100px;
height: 100px;
display: block;
float: left;
margin: 1%;
}
#box.red{
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="box"></div>
<div id="box"></div>
<div id="box"></div>
<div id="box"></div>
</body>
Like previously said use a class instead of an ID. You can use the .not() jQuery method to achieve this.
Note: The difference between Beejamin's answer and mine is that in this one you can toggle the red class clicking the same square again while also removing siblings selection.
var box = $(".box");
box.click(function() {
$(this).toggleClass("red");
box.not(this).removeClass("red");
});
body {
background-color: black;
}
.box {
background: white;
color: red;
text-align: center;
box-sizing: border-box;
width: 100px;
height: 100px;
display: block;
float: left;
margin: 1%;
}
.red {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>