This is what i tried to do i want the program to get the product number and then choose the right article to show, the first one works fine but the second one doesn't i think i need another implementation rather than using the parent element.
var ids = ["view_0", "view_1", "view_2", "view_3"]
let current_id = 0;
function next(product) {
var parent =document.getElementById(ids[current_id]).parentElement.id;
if(product==parent){
let last_array_position = ids.length;
document.getElementById(ids[current_id]).classList.remove("show");
current_id++;
if (current_id >= last_array_position) {
current_id = 0;
}
document.getElementById(ids[current_id]).classList.add("show");
}
}
<style>
#1 img {
display: none;
}
#1 img.show {
display: block;
}
</style>
<!DOCTYPE html>
<html>
<head>
<title>Multiple Slider</title>
</head>
<body>
<article id="1">
<img class="show" id="view_0"></img>
<img id="view_1"></img>
<img id="view_2"></img>
<img id="view_3"></img>
<button><</button>
<button onclick="next(1)">></button>
</article>
<article id="2">
<img class="show" id="view_0"></img>
<img id="view_1"></img>
<img id="view_2"></img>
<img id="view_3"></img>
<button><</button>
<button onclick="next(2)">></button>
</article>
</body>
Getting error:
Uncaught TypeError: Cannot read properties of null (reading 'classList')
var ids = ["view_0", "view_1", "view_2", "view_3"]
let current_id = 0;
function next() {
let last_array_position = ids.lastIndexOf;
document.getElementById(ids[current_id]).classList.remove("show");
current_id = current_id + 1;
document.getElementById(ids[current_id]).classList.add("show");
if (current_id < last_array_position) {
current_id = 0;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Multiple Slider</title>
</head>
<body>
<div id="product1">
<p class="show" id="view_0">1</p>
<p id="view_1">2</p>
<p id="view_2">3</p>
<p id="view_3">4</p>
<button><</button>
<button onclick="next()">></button>
</div>
</body>
The length of an array is in the length property, not lastIndexOf (that's a method that you use to search for the last occurrence of a value).
You need to check if the index exceeds that before you try to use the element.
Your if statement also has the wrong condition, it should be >=, not <.
var ids = ["view_0", "view_1", "view_2", "view_3"]
let current_id = 0;
function next() {
let last_array_position = ids.length;
document.getElementById(ids[current_id]).classList.remove("show");
current_id++;
if (current_id >= last_array_position) {
current_id = 0;
}
document.getElementById(ids[current_id]).classList.add("show");
}
#product1 p {
display: none;
}
#product1 p.show {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>Multiple Slider</title>
</head>
<body>
<div id="product1">
<p class="show" id="view_0">1</p>
<p id="view_1">2</p>
<p id="view_2">3</p>
<p id="view_3">4</p>
<button><</button>
<button onclick="next()">></button>
</div>
</body>
You are trying to access the element which is going out of bounds because the condition check is happening later. You need to check the condition before accessing the classList and adding show to it. Also, you can keep last_array_position = ids.length outside your function as that is not gonna change.
Here's a more simpler solution for more than one slider section in a page:
function next(productId) {
var tags = document.getElementById(productId).getElementsByTagName("p");
var index;
for (let i = 0; i < tags.length; i++) {
if (tags[i].className == "show") {
index = i;
break;
}
}
tags[index].classList.remove("show")
index = (index + 1) == tags.length ? 0 : index + 1;
tags[index].classList.add("show")
}
p {
display: none;
}
p.show {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>Multiple Slider</title>
</head>
<body>
<div id="product1">
<p class="show" id="view_1_0">1</p>
<p id="view_1_1">2</p>
<p id="view_1_2">3</p>
<p id="view_1_3">4</p>
<button><</button>
<button onclick="next('product1')">></button>
</div>
<div id="product2">
<p class="show" id="view_2_0">1</p>
<p id="view_2_1">2</p>
<p id="view_2_2">3</p>
<p id="view_2_3">4</p>
<button><</button>
<button onclick="next('product2')">></button>
</div>
</body>
Related
Ok so it does add, but not right
So my vars think that they are text but I want just the nums, so I can add them together.
How do I do this?
a fiddle to see whats so wrong
<html>
<head>
<title>Nose Clicker</title>
<style>
body{
background-image:url("https://i.pinimg.com/originals/66/27/70/6627703d20110ad2e8877fab5fc102b9.jpg");
}
#root-SuperGloabalVar1{
color: red;
font-size: 150px;
padding: 0px;
}
#var-wrapper{
opacity: 0%;
}
</style>
</head>
<body>
<div id = 'var-wrapper'>
<h1 class = 'vars' id = 'perclick'>
<---here is the first addend--->
1
</h1>
</div>
<---here the second one--->
<h1 id = 'root-SuperGloabalVar1'>0</h1>
<img onclick = '
<---get number 1--->
var v = getElementById("root-SuperGloabalVar1");
<---get number 2--->
var a = getElementById("perclick");
<---adding--->
var w = v.innerHTML+=a.innerHTML;
<---replacing and then it shows "01"--->
v.innerHTML(parrseint(a.innerHTML + v));
'
src = 'https://www.pngitem.com/pimgs/m/155-1559954_cartoon-nose-images-cartoon-nose- image-png-transparent.png'>
</body>
</html>
I didn't completely understand your question can you explain it a bit more and detailed but if you want to parse text into number then use
var x = a.innerHTML;
Number(x)
Edit:
And a proper way to use number increment and display it is like this:
(you don't need to save your integer in an element you can use a javascript variable)
let clicks = 0;
function countClicks() {
clicks++;
const display = document.getElementById("display");
display.innerHTML = clicks;
}
<!DOCTYPE html>
<html lang="en">
<body>
<div style="background: red; width: 100px; height: 100px;" onclick="countClicks();">
</div>
<div style="font-size: 30px;" id="display">0</div>
</body>
</html>
Example to use in onclick callback:
<body>
<script>var clicks = 0;</script>
<div style="background: red; width: 100px; height: 100px;"
onclick=
"
clicks++;
const display = document.getElementById('display');
display.innerHTML = clicks;
">
</div>
<div style="font-size: 30px;" id="display">0</div>
</body>
i just wanna ask how to change or display the different color with "getElementsByClassName() Method" in javascript,so here i want to change the bacground color blue from class "ex",and color red form class "example",but it doesnt work.
<!DOCTYPE html>
<html>
<head>
<style>
.example {
border: 1px solid black;
padding 8px;
}
</style>
</head>
<body>
<h1>The Document Object</h1>
<h2>The getElementsByClassName() Method</h2>
<p>Change the background color of all elements with class="example":</p>
<div class="example">
A div with class="example"
</div>
<br>
<div class="ex">
A div with class="example"
</div>
<p class="example">
A p element with class="example".
</p>
<p class="ex">
A p element with class="example".
</p>
<p>A <span class="example">span</span> element with class="example".</p>
<script>
const collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
collection[i].style.backgroundColor = "red";
}
const collection = document.getElementsByClassName("ex");
for (let i = 0; i < collection.length; i++) {
collection[i].style.backgroundColor = "blue";
}
</script>
</body>
</html>
your code works fine but you had two variables with the name collection rename one of them
<!DOCTYPE html>
<html>
<head>
<style>
.example {
border: 1px solid black;
padding 8px;
}
</style>
</head>
<body>
<h1>The Document Object</h1>
<h2>The getElementsByClassName() Method</h2>
<p>Change the background color of all elements with class="example":</p>
<div class="example">
A div with class="example"
</div>
<br>
<div class="ex">
A div with class="example"
</div>
<p class="example">
A p element with class="example".
</p>
<p class="ex">
A p element with class="example".
</p>
<p>A <span class="example">span</span> element with class="example".</p>
<script>
const collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
collection[i].style.backgroundColor = "red";
}
const collection2 = document.getElementsByClassName("ex");
for (let i = 0; i < collection2.length; i++) {
collection2[i].style.backgroundColor = "blue";
}
</script>
</body>
</html>
What does "doesn't work" mean? Is ex blue, and example uncolored? Are none colored?
Try checking the output in console (Developer tools - F12). I am certain you will receive an error using your snippet, as you redefine the collection variable twice. Use let instead of const if you plan on using a solution which changes a variable's value after assignment. Alternatively, define another variable for your second for-loop.
Here's your snippet corrected if you're still not sure:
let collection = document.getElementsByClassName("example");
for (let i = 0; i < collection.length; i++) {
collection[i].style.backgroundColor = "red";
}
collection = document.getElementsByClassName("ex");
for (let i = 0; i < collection.length; i++) {
collection[i].style.backgroundColor = "blue";
}
I am trying to access to children of body by getElementById using following code:
function myFunction() {
var body = document.getElementById("textBody");
var x = body.getElementsByClassName("myDIV");
for(var i=0; i < x.length; i++) {
var y = x[i].getElementsByTagName("h1");
var z = x[i].getElementsByTagName("mynode");
for (var i = 0; i < y.length; i++) {
y[i].setAttribute("class", "democlass");
z[i].setAttribute("class", "democlass");
}
}
}
.democlass {
color: red;
}
<body id="textBody">
<div class="myDIV">
<h1 name="demoNode">Hello World</h1>
<mynode> hi there </mynode>
</div>
<div class="myDIV">
<h1 name="demoNode">Hello World</h1>
<mynode> hi there </mynode>
</div>
<h1 name="demoNode">Hello World</h1>
<p>Click the button to create a "class" attribute with the value "democlass" and insert it to the H1 element above.</p>
<button onclick="myFunction()">Try it</button>
</body>
The code should color the header text into red color. But it seems not to be working for me. Would you please let me know why? What I know it could not have access to the exact nodes which I am waiting for.
In your styling you are referring to the democlass as a class whereas it is set as an id attribute. You can refer to my code for changes
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
</head>
<body class="textBody">
<div class="myDIV">
<h1 name="demoNode">Hello World</h1>
<mynode> hi there </mynode>
</div>
<div class="myDIV">
<h1 name="demoNode">Hello World</h1>
<mynode> hi there </mynode>
</div>
<h1 name="demoNode">Hello World</h1>
<p>Click the button to create a "class" attribute with the value "democlass" and insert it to the H1 element above.</p>
<button onclick="myFunction()">Try it</button>
</body>
<script>
function myFunction() {
//var body = document.getElementsByClassName("textBody"); (This code is not required)
var x = document.getElementsByClassName("myDIV");
for(var i=0; i < x.length; i++) {
var y = x[i].getElementsByTagName("h1");
var z = x[i].getElementsByTagName("mynode");
//initialise the second loop with a different variable
for (var j = 0; j < y.length; j++) {
y[j].setAttribute("id", "democlass");
z[j].setAttribute("id", "democlass");
}
}
}
</script>
<style type="text/css">
//Id reference for styling
#democlass {
color: red;
}
</style>
</html>
My code atm looks like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Oppgave 2</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: rgb(100, 100, 100);
margin: 5px;
float: left;
}
</style>
</head>
<body>
<label>
<ul>
<li>Antall <input id="numberFigInput" type="text"></li>
</ul>
</label>
<input id="genFigBtn" type="button" value="Generate">
<input id="removeFigBtn" type="button" value="Remove All">
<section id="myFigures"></section>
<script>
var numberFig, genFigBtn, myFigures;
function init(){
numberFigInput = document.getElementById("numberFigInput");
myFigures = document.getElementById("myFigures");
genFigBtn = document.getElementById("genFigBtn");
removeFigBtn = document.getElementById("removeFigBtn");
genFigBtn.onclick = genFigures;
removeFigBtn.onclick = removeFigures;
}
function genFigures(){
var numberFig = numberFigInput.value;
if (numberFig > 0, numberFig < 1001){
for(var amount = 0; amount < numberFig; amount++){
myFigures.innerHTML += "<div></div>"
}
}else{
alert("You have to input an integer over 0, but not over 1000!");
}
}
function removeFigures(){
}
init();
</script>
</body>
</html>
So what I want, is for the remove-button to remove the divs that im creating. Ive been googling around and have tried alot of different codes, cant seem to get it to work..
In your specific situation, you have two basic choices:
Just set innerHTML on the element to "":
myFigures.innerHTML = "";
It's slower than some alternatives, but you're not doing this in a tight loop, and it's easy.
Use a loop with removeChild:
while (myFigures.firstChild) {
myFigures.removeChild(myFigures.firstChild);
}
See this other SO answer for information comparing the two techniques.
Here's that first option in context:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Oppgave 2</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: rgb(100, 100, 100);
margin: 5px;
float: left;
}
</style>
</head>
<body>
<label>
<ul>
<li>Antall <input id="numberFigInput" type="text"></li>
</ul>
</label>
<input id="genFigBtn" type="button" value="Generate">
<input id="removeFigBtn" type="button" value="Remove All">
<section id="myFigures"></section>
<script>
var numberFig, genFigBtn, myFigures;
function init(){
numberFigInput = document.getElementById("numberFigInput");
myFigures = document.getElementById("myFigures");
genFigBtn = document.getElementById("genFigBtn");
removeFigBtn = document.getElementById("removeFigBtn");
genFigBtn.onclick = genFigures;
removeFigBtn.onclick = removeFigures;
}
function genFigures(){
var numberFig = numberFigInput.value;
if (numberFig > 0, numberFig < 1001){
for(var amount = 0; amount < numberFig; amount++){
myFigures.innerHTML += "<div></div>"
}
}else{
alert("You have to input an integer over 0, but not over 1000!");
}
}
function removeFigures(){
myFigures.innerHTML = "";
}
init();
</script>
</body>
</html>
Like T.J. Crowder said,
myFigures.innerHTML = "";
would work. However, that assumes that myFigures is empty when your DOM is initially loaded. If that is NOT the case, you need to add a class to the div when you create it.
AddDiv function:
function genFigures(){
var numberFig = numberFigInput.value;
if (numberFig > 0, numberFig < 1001){
for(var amount = 0; amount < numberFig; amount++){
myFigures.innerHTML += "<div class='AddedDiv'></div>"
}
}else{
alert("You have to input an integer over 0, but not over 1000!");
}
}
To remove them:
$(".AddedDiv").each(function(){
$(this).parentNode.removeChild($(this));
});
I am having trouble figuring this out. After a user clicks Link1 I would like it to close when Link2 has been clicked using Javascript. I have seen an example or two with this working in jquery, but I already have a tone of code written using this method, so I would prefer to to have to start all over.Thanks everyone!
HTML...
<style>
.hidden { display: none; }
.visible { display: block; }
</style>
</head>
<body>
<div id="col2">
Link 1
<div id="contentONE" class="hidden">
<h3>contentONE</h3>
<ul>
<li>Content1.1</li>
<li>Content1.2</li>
</ul>
</div>
</div>
<div id="col2">
Link 2
<div id="contentTWO" class="hidden">
<h3>contentTWO</h3>
<ul>
<li>Content2.1</li>
<li>Content2.2</li>
</ul>
</div>
</div>
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
</body>
Try something like this:
var collapsables = document.getElementsByClassName('collapsable');
function unhide(divID) {
// Hide previous
for (var i = 0; i < collapsables.length; i++) {
collapsables[i].className = 'collapsable hidden';
}
// Show new
var item = document.getElementById(divID);
if (item) {
item.className = 'collapsable';
}
}
Demo: http://jsfiddle.net/MLmXa/