Bootstrap tooltip feature not working even after initializing in js - javascript

My custom tooltip wasn't displaying at all so I striped my document down to the bare bones and actually plucked an example from the bootstrap website. It still won't work.
https://jsfiddle.net/swagat123/pwzs397b/2/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<script>
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
// const exampleEl = document.getElementById('example');
// const tooltip = new bootstrap.Tooltip(exampleEl, options);
//Tried this; didn't work:
// $(function () {
// $('[data-toggle="tooltip"]').tooltip()
// })
</script>
<h1>Hello, world!</h1>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Tooltip on right">
Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Tooltip on bottom">
Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Tooltip on left">
Tooltip on left
</button>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>```
Tried bunch of different examples and different ways of initializing to no avail. I need a tooltip to pop up.

The selector is running before the HTML is loaded, so no tooltip elements are found and initialized. If you run it after the window has loaded, it works:
<script>
window.addEventListener('load', function(){
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
})
</script>
Alternatively, you could move the block to the end of the document.

Related

Can't properly animate bootstrap 5 collapse element created via js

My goal is to create a collapse element when the form data has been processed by the server, to notify the user whether the data was successfully sent to the server or an error occurred.
function sendForm(event, form) {
const wrapper=document.createElement('div');
wrapper.setAttribute('role', 'alert');
wrapper.classList.add('alert', 'alert-dismissible', 'alert-success');
wrapper.innerHTML='<span>Success!</span><button type="button" class="btn-close" data-bs-dismiss="alert"></button>';
form.prepend(wrapper);
const bsWrapperCollapse = bootstrap.Collapse.getOrCreateInstance(wrapper);
bsWrapperCollapse.show();
setTimeout(() => {
bsWrapperCollapse.hide();
}, 4000);
setTimeout(() => {
wrapper.remove();
}, 7000);
form.reset();
event.preventDefault();
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<main class="container-fluid my-5" style="max-width:300px">
<form action="#" method="post" onsubmit="sendForm(event, this)">
<button type="submit" class="btn btn-primary">My form submit btn</button>
</form>
<button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
<div class="collapse" id="collapseExample">
<div class="alert alert-dismissible alert-success" role="alert">
<span>Success!</span>
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
I added two implementations to the test html - the first button calls my implementation, which is in the form and when it is pressed, data should be sent, but the animation of appearing and hiding is jerky. The second button is taken from the bootstrap documentation, with the correct animation, which is what I want to achieve in my implementation using js.
I think the problem is that the element created in js haven't the collapse class, the transition is applied only if the element has collapse class. I modified the code , I added the class collapse to the wrapper and added the alerts classes to a div inside the wrapper element.Now it seems the animation works properly
function sendForm(event, form) {
const wrapper=document.createElement('div');
wrapper.setAttribute('role', 'alert');
wrapper.classList.add("collapse");
wrapper.innerHTML='<div class="alert alert-dismissible alert-success"><span>Success!</span><button type="button" class="btn-close" data-bs-dismiss="alert"></button> </div>';
form.prepend(wrapper);
const bsWrapperCollapse = bootstrap.Collapse.getOrCreateInstance(wrapper);
bsWrapperCollapse.show();
setTimeout(() => {
bsWrapperCollapse.hide();
}, 4000);
setTimeout(() => {
wrapper.remove();
}, 7000);
form.reset();
event.preventDefault();
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<main class="container-fluid my-5" style="max-width:300px">
<form action="#" method="post" onsubmit="sendForm(event, this)">
<button type="submit" class="btn btn-primary">My form submit btn</button>
</form>
<button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
<div class="collapse" id="collapseExample">
<div class="alert alert-dismissible alert-success" role="alert">
<span>Success!</span>
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
So, I figured out how I can make the animation normal without even checking the answers here. I noticed that the alert container in the html code is wrapped in another container. But when I created the alert via js, I didn't wrap it. After I wrapped this element, the animation worked as it should. #Nick suggested that the animation doesn't work as expected due to the lack of a collapse class, but I tested his code without it and the animation still works. The reason the animation works correctly is that he wrapped my code in a container via innerHTML, essentially doing the same thing I did. Here's what I ended up with.
function sendForm(event, form) {
const alert=document.createElement('div');
alert.setAttribute('role', 'alert');
alert.classList.add('alert', 'alert-dismissible', 'alert-success');
alert.innerHTML='<span>Success!</span><button type="button" class="btn-close" data-bs-dismiss="alert"></button>';
const alertWrapper=document.createElement('div');
alertWrapper.append(alert);
form.prepend(alertWrapper);
const alertWrapperCollapse = bootstrap.Collapse.getOrCreateInstance(alertWrapper);
alertWrapperCollapse.show();
setTimeout(() => {
alertWrapperCollapse.hide();
}, 4000);
setTimeout(() => {
alertWrapper.remove();
}, 7000);
form.reset();
event.preventDefault();
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<main class="container-fluid my-5" style="max-width:300px">
<form action="#" method="post" onsubmit="sendForm(event, this)">
<button type="submit" class="btn btn-primary">My form submit btn</button>
</form>
<button class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
<div class="collapse" id="collapseExample">
<div class="alert alert-dismissible alert-success" role="alert">
<span>Success!</span>
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
</div>
</main>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
Anyway, I marked #Nick's answer as helpful.

Why does my Javascript calculator function return "undefined" RANDOMLY, when I click on number buttons?

I'm working on a building out a fully functioning calculator in javascript. so far im able to add numbers to the display and delete numbers (both using click events).
However, for some reason, when I click on the number buttons, I randomly get "undefined" returned in the display. so using my code as an example, when i click a number button, the currNum variable is supposed to take the button value (which is a number) and append it to the display(numberDisplay). but Its giving me random undefined's instead.
Things I have tried:
This undefined error happens even if I delete the "deleteLastnumberFromDisplay" handler and its related clickevent.
inside the "addClickedNumberToDisplay" I've also tried running currNum = numberDisplay.value += e.target.value; instead of parseInt(currNum = numberDisplay.value += e.target.value); and it still returns and logs undefined.
inside the "addClickedNumberToDisplay" I've also tried running currNum = numberDisplay.value += e.target.value;
return parseInt(currNum);
Heres my code so far.
Also, any tips on improving the code that I have so far is also appreciated. thanks
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/utils.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/svg.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
crossorigin="anonymous" referrerpolicy="no-referrer"/>
<title>Pretty Calc</title>
</head>
<body>
<div class="calculator">
<div id="calc_container">
<h1>Pretty<br> <span>calculator</span></h1>
<main>
<input type="text" id="curr_calculation" class="input-field" placeholder=0>
<div class="num_grid">
<!-- Row 1-->
<button type="button" id="clear" class="top-operators btn"><p>clr</p></button>
<button type="button" id="delete" class="top-operators"><p><i class="fa-solid fa-arrow-left"></i></p>
</button>
<button type="button" id="divide" class="operator btn"><p>/</p></button>
<!-- Row 2-->
<button type="button" id="seven" class="num-btn" value="7"><p>7</p></button>
<button type="button" id="eight" class="num-btn" value="8"><p>8</p></button>
<button type="button" id="nine" class="num-btn" value="9"><p>9</p></button>
<button type="button" id="multiply btn" class="operator"><p>x</p></button>
<!-- Row 3-->
<button type="button" id="four" class="num-btn" value="4"><p>4</p></button>
<button type="button" id="five" class="num-btn" value="5"><p>5</p></button>
<button type="button" id="six" class="num-btn" value="6"><p>6</p></button>
<button type="button" id="subtract btn" class="operator"><p>-</p></button>
<!-- Row 4-->
<button type="button" id="one" class="num-btn" value="1"><p>1</p></button>
<button type="button" id="two" class="num-btn" value="2"><p>2</p></button>
<button type="button" id="three" class="num-btn" value="3"><p>3</p></button>
<button type="button" id="plus btn" class="operator"><p>+</p></button>
<!-- Row 4-->
<button type="button" id="zero" class="num-btn" value="0"><p>0</p></button>
<button type="button" id="decimal btn" value="."><p>.</p></button>
<button type="button" id="equal btn" class="operator"><p>=</p></button>
</div>
</main>
</div>
</div>
<script src="js/pretty-calc.js"></script>
</body>
</html>
JAVASCRIPT:
"use strict";
// global variables
// let prevNum;
let currNum;
let numBtns = Array.from(document.querySelectorAll(".num-btn"));
let numberDisplay = document.querySelector(".input-field")
let deleteKey = document.querySelector("#delete")
// function calls
function addClickedNumberToDisplay(e){
currNum = parseInt(numberDisplay.value += e.target.value);
return currNum;
}
function deleteLastNumberFromDisplay(e){
let y = currNum.toString().substring(0, currNum.toString().length - 1);
numberDisplay.value = parseInt(y);
return currNum = parseInt(y);
}
// eventlisteners
numBtns.forEach(numberButton => numberButton.addEventListener("click", addClickedNumberToDisplay));
deleteKey.addEventListener("click", deleteLastNumberFromDisplay)
because sometimes click event happen in <p> element, so you have to get parent element (button) value
currNum = parseInt(numberDisplay.value += e.target.value || e.target.parentElement.value);
I think it better to write <button>Text</button> instead of <button><p>Text</p></button>

execCommand h1 style only selected text

I am working on custom textarea with highlighting options.
Now added h1-h4 & bold options.
Problem:
When I select the text and click on Heading1 button it style the whole row not selected text. When I click on Bold button it style only selected text.
I want to apply h1-h4 style only for selected text instead of whole row.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Comment</h2>
<div class="panel panel-default">
<div class="panel-heading">
<button data-command="h1" class="btn btn-default btn-sm">Heading1</button>
<button data-command="h2" class="btn btn-default btn-sm">Heading2</button>
<button data-command="h3" class="btn btn-default btn-sm">Heading3</button>
<button data-command="h4" class="btn btn-default btn-sm">Heading4</button>
<button data-command="bold" class="btn btn-default btn-sm">Bold</button>
</div>
<div class="panel-body" contenteditable>Sample comment</div>
</div>
</div>
</body>
<script>
$(function() {
$(".btn").click(function() {
var command = $(this).data("command");
if (command == 'h1' || command == 'h2' || command == 'h3' || command == 'h4')
document.execCommand('formatBlock', false, '<' + command + '>');
else
document.execCommand(command);
})
})
</script>
</html>
I liked your question. I was not aware of this api. But please next time use ES6(it is everywhere now) and brackets for block expressions.
So from docs
Adds an HTML block-level element around the line containing the current selection, replacing the block element containing the line if one exists (in Firefox, is the exception — it will wrap any containing block element). Requires a tag-name string as a value argument. Virtually all block-level elements can be used.
But you can use insertHTML command.
<!DOCTYPE html />
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Comment</h2>
<div class="panel panel-default">
<div class="panel-heading">
<button data-command="h1" class="btn btn-default btn-sm">
Heading1
</button>
<button data-command="h2" class="btn btn-default btn-sm">
Heading2
</button>
<button data-command="h3" class="btn btn-default btn-sm">
Heading3
</button>
<button data-command="h4" class="btn btn-default btn-sm">
Heading4
</button>
<button data-command="bold" class="btn btn-default btn-sm">
Bold
</button>
</div>
<div class="panel-body" contenteditable>Sample comment</div>
</div>
</div>
</body>
<script>
$(function() {
$(".btn").click(function() {
var command = $(this).data("command");
if (
command == "h1" ||
command == "h2" ||
command == "h3" ||
command == "h4"
) {
const selection = window.getSelection();
document.execCommand(
"insertHTML",
false,
`<${command}>${selection}</${command}>`
);
} else {
document.execCommand(command);
}
});
});
</script>
</html>
Also do not forget to serialize you content.

Progress Bar width to change when increment button clicked. Javascript

Working now
Ok so hello, im looking for help with the code below:
When i click the increment button the values increment by one on each click, which is essentially what i want it do to. But I also want the blue progress bar to fill the bar as the numbers increase.
I have a run able piece of code which may help with de-bugging here below.
All help appreciated as i am new to this site Thanks.
function getProgress() {
return document.getElementById("progressbar").getAttribute("aria-valuenow");
return document.getElementById("progressbar").getAttribute("style","width");
return document.getElementById("progressbar").innerHTML;
}
function setProgress(value) {
document.getElementById("progressbar").setAttribute("aria-valuenow",value);
document.getElementById("progressbar").setAttribute("style","width: " +value+ "%");
document.getElementById("progressbar").innerHTML = (value+ "%");
}
function increment() {
var i = getProgress();
if(i < 100){
i++;
setProgress(i);
}else{
alert("Progress Complete!");
}
}
function decrement() {
var d = getProgress();
setProgress(d - 1);
}
function resetButton() {
var r = getProgress();
setProgress(r = 0);
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Progress Bar</title>
</head>
<body>
<!-- Container -->
<div class="container">
<h1>This Process bar is animated using <br>JavaScript!</h1>
<br>
<!-- Div For Progress Bar -->
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="progressbar" >0%</div>
</div>
<br>
<!-- Buttons -->
<button type="button" class="btn btn-primary" onclick = "increment()">Increment</button>
<button type="button" class="btn btn-dark" onclick="resetButton()">Reset</button>
<button type="button" class="btn btn-success" onclick="decrement()">Decrement</button>
<button type="button" class="btn btn-warning" onclick="">Start Auto Progress!</button>
<button type="button" class="btn btn-danger" onclick="">Stop Auto Progress!</button>
<p id="value"> </p>
<!-- End of Container -->
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="Assignment4.js"></script>
</body>
</html>
You're only missing a single colon in your line to set width. Should be "width: " + value instead.

Can't change div style with JS function

The main goal is to show different divs depending on which button I click, so they all start with the display style at "none" (except a default one called "atualizacoes"). And after I click a button ALL of the divs should be set to
display="none" and after that the one I associated that button with is set to display="block".
However something isn't right because when I click one of the buttons, the default div does disappear however nothing ever appears.
This is how I'm trying to accomplishing it:
In order:
snippet 1 - function I use inside my index.html to change all the
displays
snippet 2 - rule in my stylesheet
snippet 3 - parts of my index.html code (I didn't want to paste
EVERYTHING)
<script type="text/javascript">
function replace(show) {
document.getElementById('default').style.display="none";
document.getElementById('ecra').style.display="none";
document.getElementById(show).syle.display = "block";
}
</script>
.ecra
{
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>University Platform</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="dashboard.css" rel="stylesheet">
<!-- jquery -->
<script src="assets/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<!-- these are the buttons that are located on a sidebar -->
<div class="row">
<h3>Options</h3>
<button type="button" class="btn btn-default botao pull-left" onclick="replace('addestudante')">Adicionar Estudante</button>
</div>
<div class="row">
<button type="button" class="btn btn-default botao pull-left" onclick="replace('adduc')">Adicionar UC</button>
</div>
<!-- these are the divs I want to switch around -->
<div class="row" id='default'>
<p> Hello World </p>
</div>
<!-- in CSS I also made a rule that makes all "ecra" divs be invisible from the start-->
<div class="row ecra" id='addestudante'>
<button type="button" class="btn btn-default"> TEST 1</button>
</div>
<div class="row ecra" id='adduc'>
<button type="button" class="btn btn-default"> TEST 2</button>
</div>
</body>
Why is this function not working properly? Is there something wrong with my code?
There are a couple of issues with what you've written.
For one, you don't have any elements with ID "ecra" — what you want to do is affect all the elements that have the class "ecra". You can do this by looping or mapping over document.getElementsByClassName("ecra").
Secondly, you've misspelt style when you try to show the show element.
Try using this adapted function instead:
function replace(show) {
document.getElementById("default").style.display = "none";
Array.from(document.getElementsByClassName("ecra")).map(element => element.style.display = "none");
document.getElementById(show).style.display = "block";
}
By what I thought, you want to get elements by class name. They're ecra, so you can use querySelectorAll and do a loop for its length. I'll not use getElementsByClassName because it will make the line more longer and return an array.
function replace(show){
var q=document.querySelectorAll('.ecra'),
document.getElementById('default').style.display="none";
for(var i=0,l=q.length;i<l;i++){
!function(i){
q[i].style.display="none"
}(i)
}
document.querySelector('#'+show).style.display = "block"
}
I saw jQuery imported in your page. So I suggest to use jQuery.
<script type="text/javascript">
function replace(show) {
jQuery(function($){
$("#default").css({
"display" : "none"
});
$(".ecra").css({
"display" : "none"
});
$("#"+show).css({
"display" : "block"
});
});
}
</script>
Edited, missing characters.
JS corrected : http://jsfiddle.net/csfd8x35/
.ecra
{
display: none;
}
<!-- these are the buttons that are located on a sidebar -->
<div class="row">
<h3>Options</h3>
<button type="button" class="btn btn-default botao pull-left" onclick="replace1('addestudante')">Adicionar Estudante</button>
</div>
<div class="row">
<button type="button" class="btn btn-default botao pull-left" onclick="replace1('adduc')">Adicionar UC</button>
</div>
<!-- these are the divs I want to switch around -->
<div class="row" id='default'>
<p> Hello World </p>
</div>
<!-- in CSS I also made a rule that makes all "ecra" divs be invisible from the start-->
<div class="row ecra" id='addestudante'>
<button type="button" class="btn btn-default"> TEST 1</button>
</div>
<div class="row ecra" id='adduc'>
<button type="button" class="btn btn-default"> TEST 2</button>
</div>
<script>
function replace1(show) {
document.getElementById('default').style.display="none";
var allByClass = document.getElementsByClassName('ecra');
for (var i=0;i< allByClass.length; i++) {
allByClass[i].style.display = "none";
}
document.getElementById(show).style.display = "block";
}
</script>

Categories