I'm wondering how i'd put this into a coloured rounded box to make it pop from the background a bit. I will provide a picture of what i'm aiming for below + colour: #23272a or rgb(35, 39, 42)
I have pasted my app.js here:
let stockPriceElement = document.getElementById('shib-worth');
let lastPrice = null;
ws.onmessage = (event) => {
let stockObject = JSON.parse(event.data);
let price = parseFloat(stockObject.p).toFixed(8);
let shib_start_price = 0.00003442;
let shib_balance = 7263219;
let shib_start_worth = shib_start_price * shib_balance;
let shib_worth_now = price * shib_balance;
let convert_shib_worth_to_gbp = shib_worth_now / 100 * 73
stockPriceElement.innerText = parseFloat(convert_shib_worth_to_gbp).toFixed(2);
stockPriceElement.style.textAlign = "center";
stockPriceElement.style.color = convert_shib_worth_to_gbp === shib_start_worth ? '#9e9e9e' : convert_shib_worth_to_gbp > shib_start_worth ? '#4caf50' : '#f44336';
stockPriceElement.style.fontFamily = 'Sora', sans-serif;
lastPrice = convert_shib_worth_to_gbp
};
I have pasted my index.html here:
<!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.0">
<title>Test</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sora:wght#800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body style="background-color:rgb(44, 47, 51);">
<h1 id="shib-worth"></h1>
<script src="app.js"></script>
</body>
</html>
I'm also looking to add a static "£" sign aligned to the number(inside the box with it) in the same font but in the colour: white
thanks and kind regards!
Use css classes instead of style properties, then investigate border-radius. For your £ consider using a CSS Pseudo element with that as the content.
body {
background-color: #333;
}
.stock-price {
/*Rounded corners*/
border-radius: 5px;
/*The following is basic styling adjust as needed*/
padding: 10px;
font-size: 16px;
font-family: 'Sora', sans-serif;
text-align: center;
background-color: #666;
margin: 6px;
width: 100px;
}
/*Pseudo element for pound sign*/
.stock-price::before {
content: '£';
color: white;
}
/*Classes to indicate price movement*/
.stock-price.no-change {
color: #9e9e9e;
}
.stock-price.loss {
color: #f44336;
}
.stock-price.gain {
color: #4caf50;
}
<div class="stock-price no-change">123</div>
<div class="stock-price loss">456</div>
<div class="stock-price gain">123</div>
Then update your js to (deleteing all your style code):
stockPriceElement.innerText = parseFloat(convert_shib_worth_to_gbp).toFixed(2);
/*Add base class*/
stockPriceElement.classList.add('stock-price');
/*Add appropriate price movement class*/
stockPriceElement.classList.add(convert_shib_worth_to_gbp === shib_start_worth ? 'no-change' : convert_shib_worth_to_gbp > shib_start_worth ? 'gain' : 'loss');
Just as #JonP mentioned, you can create CSS classes and remove the stockPriceElement.style.* uses in your JavaScript code. Simply add the classes you need to that DOM element with stockPriceElement.classList.add().
To include the "£" icon at the beginning of each stock price, create a ::before pseudo element and add the icon as the its content property.
let stockPriceElement = document.getElementById('shib-worth');
let lastPrice = null;
// `ws` wasn't defined in your code
ws.onmessage = (event) => {
let stockObject = JSON.parse(event.data);
let price = parseFloat(stockObject.p).toFixed(8);
let shib_start_price = 0.00003442;
let shib_balance = 7263219;
let shib_start_worth = shib_start_price * shib_balance;
let shib_worth_now = price * shib_balance;
let convert_shib_worth_to_gbp = shib_worth_now / 100 * 73
stockPriceElement.innerText = parseFloat(convert_shib_worth_to_gbp).toFixed(2);
// Add the text-align and font-family declaration
// to a CSS class
stockPriceElement.classList.add("stock-price");
// This could also be broken into separate color
// classes to add/toggle based on the conditional logic
stockPriceElement.style.color = convert_shib_worth_to_gbp === shib_start_worth ? '#9e9e9e' : convert_shib_worth_to_gbp > shib_start_worth ? '#4caf50' : '#f44336';
lastPrice = convert_shib_worth_to_gbp
};
:root {
--grey: #9e9e9e;
--green: #4caf50;
--red: #f44336;
}
body {
background-color: rgb(44, 47, 51);
}
.stock-price {
padding: 14px 1rem;
text-align: center;
font-size: 1.4rem; /* Vary this how you would like */
font-family: 'Sora', sans-serif;
border-radius: 3px;
color: var(--green);
background: rgb(35, 38, 41);
width: fit-content;
-moz-width: fit-content; /* For Firefox */
}
/* Create a Pseudo element to represent the icon */
.stock-price::before {
content: "£";
color: #fff;
margin: 0 6px 0 0; /* vary space around the coin - top right bottom left */
}
.red {
color: var(--red);
}
<!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.0">
<title>Test</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sora:wght#800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="shib-worth" class="stock-price">377.41</h1>
<h1 id="shib-worth" class="stock-price red">377.41</h1>
</body>
</html>
Related
I'm making a grid and I'm not sure how to make the cells fill the space between them when the grid size changes.
I have a function that generates a grid and receives size as a parameter.
What should be added to the grid-square class to make the cells fill the entire space?
//get the grid div
const container = document.querySelector("#container");
function changeColor(e) {
const hoverColor = Math.floor(Math.random() * 16777215).toString(16);
e.target.style.backgroundColor = "#" + hoverColor;
}
function createDivs(size) {
//generate grid elements
for (let i = 0; i < size * size; i++) {
const newDiv = document.createElement("div");
newDiv.classList.add("grid-square");
newDiv.addEventListener("mouseover", changeColor);
container.appendChild(newDiv);
}
}
createDivs(2);
* {
box-sizing: border-box;
}
#container {
display: flex;
background-color: rgba(49, 49, 49, 0.281);
width: 50vw;
height: 50vh;
flex-wrap: wrap;
}
.grid-square {
background-color: white;
width: 50%;
aspect-ratio: 1/1;
}
.grid-square:hover {
cursor: pointer;
}
<!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.0" />
<title>Etch a Sketck</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div id="container"></div>
</body>
</html>
So this is the way I did it. I changed from flex box to grid. Grid has a property called grid-template-columns that defines how many columns you have and how wide each one is. The syntax here is grid-template-columns: repeat(n, 1fr) where n is the number of columns you want.
In order to set the column numbers in javascript, I've used a css custom property (also called a css variable) to define the column numbers. To set the custom property itself I've set the element's style attribute to define that property on load.
Have a look below:
//get the grid div
const container = document.querySelector("#container");
function changeColor(e) {
const hoverColor = Math.floor(Math.random() * 16777215).toString(16);
e.target.style.backgroundColor = "#" + hoverColor;
}
function createDivs(size) {
//generate grid elements
for (let i = 0; i < size * size; i++) {
const newDiv = document.createElement("div");
newDiv.classList.add("grid-square");
newDiv.addEventListener("mouseover", changeColor);
container.appendChild(newDiv);
}
// Added this
container.style.cssText="--cols: "+size;
}
createDivs(5);
* {
box-sizing: border-box;
}
#container {
/* added this */
display: grid;
grid-template-columns: repeat(var(--cols), 1fr);
/* end of added css */
background-color: rgba(49, 49, 49, 0.281);
width: 50vw;
height: 50vh;
flex-wrap: wrap;
}
.grid-square {
background-color: white;
aspect-ratio: 1/1;
}
.grid-square:hover {
cursor: pointer;
}
<div id="container"></div>
The solution was to set the width when creating the cells.
//get the grid div
const container = document.querySelector("#container");
function changeColor(e) {
const hoverColor = Math.floor(Math.random() * 16777215).toString(16);
e.target.style.backgroundColor = "#" + hoverColor;
}
function createDivs(size) {
//generate grid elements
for (let i = 0; i < size * size; i++) {
const newDiv = document.createElement("div");
newDiv.classList.add("grid-square");
newDiv.addEventListener("mouseover", changeColor);
//Setting the width
newDiv.style.width = 100 / size + "%";
container.appendChild(newDiv);
}
}
createDivs(6);
* {
box-sizing: border-box;
}
#container {
display: flex;
background-color: rgba(49, 49, 49, 0.281);
width: 50vw;
height: 50vh;
flex-wrap: wrap;
}
.grid-square {
background-color: white;
width: 50%;
aspect-ratio: 1/1;
}
.grid-square:hover {
cursor: pointer;
}
<!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.0" />
<title>Etch a Sketck</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<div id="container"></div>
</body>
</html>
I added 5 buttons in js to html and I want them to be defined with a one second delay, and because of this js, when it reaches the addEventListener line, those buttons are not defined and gives an error.
HTML:
<!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.0">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div id="btn-adder"></div>
<script src="./script.js"></script>
</body>
</html>
CSS:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-size: 20px;
}
body{
background: rgb(61, 61, 61);
}
#btn-adder{
margin-top: 40px;
text-align: center;
}
#btn-adder button{
padding: 5px;
margin: 5px;
}
JavaScript:
const btnAdder = document.getElementById("btn-adder");
for (let i = 0; i < 5; i++) {
setTimeout(function () {
btnAdder.innerHTML += `<button id="btn${i}">Button ${i}</button>`;
}, 1000);
}
for (let i = 0; i < 5; i++) {
document.getElementById(`btn${i}`).addEventListener("click", function () {
console.log(`Button ${i} clicked`);
});
}
Is there a way to make the addEventListener recognize the new variables?
Yes it's possible and you don't even need the second loop, which is slowing down your code. (even though you probably won't notice it)
Instead of adding the HTML directly to the btn-adder, you can create a new button and directly attach the eventlistener to it.
You can create a new HTML element with document.createElement() and then add all attributes, eventlisteners and everything else you need to the button.
Finally you'll add the newly created button with appendChild() as a new child element to your btn-adder element.
const btnAdder = document.getElementById("btn-adder");
for (let i = 0; i < 5; i++) {
setTimeout(function () {
// create button
const buttonElement = document.createElement('button');
buttonElement.id = `btn${i}`;
buttonElement.textContent = `Button ${i}`
// add eventlistener to the created button
buttonElement.addEventListener("click", function () {
console.log(`Button ${i} clicked`);
});
// add button to their parent
btnAdder.appendChild(buttonElement);
}, 1000);
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-size: 20px;
}
body{
background: rgb(61, 61, 61);
}
#btn-adder{
margin-top: 40px;
text-align: center;
}
#btn-adder button{
padding: 5px;
margin: 5px;
}
<!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.0">
<link rel="stylesheet" href="./style.css">
<title>Document</title>
</head>
<body>
<div id="btn-adder"></div>
<script src="./script.js"></script>
</body>
</html>
An approach close to what billyonecan mentioned but with use of appendChild instead of innerHTML which can lead to unwanted behaviour.
<!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.0">
<link rel="stylesheet" href="./style.css">
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-size: 20px;
}
body{
background: rgb(61, 61, 61);
}
#btn-adder{
margin-top: 40px;
text-align: center;
}
#btn-adder button{
padding: 5px;
margin: 5px;
}
</style>
<title>Document</title>
</head>
<body>
<div id="btn-adder"></div>
<script>
const btnAdder = document.getElementById("btn-adder");
for (let i = 0; i < 5; i++) {
setTimeout(function () {
let b = document.createElement('button');
b.id = "btn" + i;
b.textContent = "Button " + i;
btnAdder.appendChild(b);
document.getElementById("btn"+i).addEventListener("click", function () {
console.log(`Button ${i} clicked`);
});
},1000 );
}
</script>
</body>
</html>
I want to make a loading animation for my webpage which will take 8-10 sec to load using JavaScript or Ajax(Which I don't know)
The loading animation is a progress bar
Which I want to stop for every 1 sec for increment of 10% eg( https://codepen.io/gustitammam/pen/RRXGdj )
Bootstrap is not welcomed and I don't want text and percentage on it
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="D:\PORTFOLIO\master.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.1/jquery.js" integrity="sha512-qsjFwnCEe/k1YLJDkiRqDgKb+Eq+35xdoeptV7qfI7P6G/kajIF0R6d/9SiOxSkU/aNmHzuipOEYaTUHCJUIeQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/javascript.util/0.12.12/javascript.util.min.js" integrity="sha512-oHBLR38hkpOtf4dW75gdfO7VhEKg2fsitvHZYHZjObc4BPKou2PGenyxA5ZJ8CCqWytBx5wpiSqwVEBy84b7tw==" crossorigin="anonymous"></script>
</head>
<body>
<div id="myprogress">
<div id="mybar">
<span id="incvalue">1%</span>
</div>
</div>
<br> <button onclick="move()">ClickMe</button>
<script>
const move = () => {
var elem = document.getElementById("mybar");
var width = 1;
var id = setInterval(frame, 10)
function frame(){
if(width >= 100){
clearInterval(id);
}else{
width++;
elem.style.width = width + "%";
document.getElementById("incvalue").innerHTML = width + "%";
}
}
}
</script>
</body>
</html>
CSS
html{
scroll-behavior: smooth;
}
body{
background: #181818;
color: #f4eee8;
}
#myprogress{
width: 45%;
background: #181818;
margin: auto;
}
#mybar{
width: 1%;
background: white;
color: white;
text-align: center;
}
In the example you cited, you can just comment out the JS lines where the following fields are set:
.attr and .text
Regarding your desire to omit Bootstrap, however, you are not asking a simple technical question but proposing that somebody write a whole program fragment for you, which is generally not the intended purpose of Stack overflow.
Actually I didn't do it but I don't know his Stack ID so #0_0#1045(From Discord)
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="D:\PORTFOLIO\master.css">
</head>
<body>
<h3>Dynamic Progress Bar</h3>
<p>Running progress bar from 0% to 100% in 10 seconds</p>
<div class="progress">
<div class="current-progress">
</div>
</div>
</div>
<script src="master.js"></script>
</body>
</html>
CSS
html{
scroll-behavior: smooth;
}
body{
background: #181818;
color: #f4eee8;
height: 100vh;
width: 100vw;
}
.progress {
position: relative;
margin-top: 20px;
height: 20px;
width: 700px;
background-color: #181818;
}
.current-progress {
height: 100%;
width: 0%;
background-color: white;
text-align: center;
transition: all 0.3s;
}
JS
let progressValue = 0;
const progressBar = document.querySelector(".current-progress");
progressBar.style.width = `${progressValue}%`;
const timer = setInterval(() => {
if (progressValue < 100) {
progressValue += 10;
progressBar.style.width = `${progressValue}%`;
}
if (progressValue === 100) {
clearInterval(timer);
}
}, 1000);
Finally Solved!!!
I would like to capture data from selected div(ie. name of country) by click and put in span , additionaly i want to find some way to mark selected divs, but also unmark others div which were selected previously.
https://codepen.io/tatasek/pen/PoojNGL
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="div div__first"></div>
<div class="div div__second"></div>
<div class="div div__third"></div>
<p>I have selected:<span class="selectedCountry"></span></p>
<script src="app.js"></script>
</body>
</html>
CSS
body{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;;
}
.div{
margin-left: 10px;
padding: 3px;
border: 2px solid black;
background-color: skyblue;
cursor: pointer;
}
p{
margin-left: 10px;;
}
.active{
background-color: yellow;
}
JS
const countries = ['Lithuania', 'Latvia', 'Estonia'];
const divList = document.querySelectorAll('.div');
divList.forEach(function(div, index){
div.textContent = countries[index];
})
Thanks for your time!
Michal
Building on what you've done so far, I just added some event listeners to check for changes and add the selected items to the list. Let me know if you need any further clarification.
const countries = ['Lithuania', 'Latvia', 'Estonia'];
const divList = document.querySelectorAll('.div');
divList.forEach(function(div, index){
div.textContent = countries[index];
div.addEventListener('click', function(){
divList.forEach(function(el, i) {
el.classList.remove('active')
})
this.classList.toggle('active');
})
})
var choices = document.getElementsByTagName('div')
for(var i = 0; i < choices.length; i++) {
choices[i].addEventListener('click', function() {
document.getElementsByClassName('selectedCountry')[0].innerText =
document.getElementsByClassName('active')[0].innerText;
})
}
body{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
.div{
margin-left: 10px;
padding: 15px;
border: 2px solid black;
background-color: skyblue;
cursor: pointer;
}
p{
margin-left: 10px;
}
.active{
background-color: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="div div__first"></div>
<div class="div div__second"></div>
<div class="div div__third"></div>
<p>I have selected:<span class="selectedCountry"></span></p>
<script src="app.js"></script>
</body>
</html>
Try
for (let i = 0; i < document.getElementsByClassName('div').length; i++) {
document.getElementsByClassName('div')[i].addEventListener('click', appendToSpan, false);
}
function appendToSpan(e) {
document.getElementsByClassName('selectedCountry')[0].innerText += e.target.innerText;
}
Edit:
Change to:
const countries = ['Lithuania', 'Latvia', 'Estonia'];
const divList = document.querySelectorAll('.div');
divList.forEach(function(div, index){
div.textContent = countries[index];
div.addEventListener('click', function() {
this.classList.toggle('active');
if (this.classList.contains('active')) {
document.getElementsByClassName('selectedCountry')[0].classList.add(this.innerText);
} else {
document.getElementsByClassName('selectedCountry')[0].classList.remove(this.innerText);
}
let classes = document.getElementsByClassName('selectedCountry')[0].getAttribute('class').split(' ');
document.getElementsByClassName('selectedCountry')[0].innerText = '';
for (let i = 1; i < classes.length; i++) {
document.getElementsByClassName('selectedCountry')[0].innerText += classes[i]
}
})
})
I've used addEventListener on click event on each div. Also I've created selected variable which is an array and keeps selected items. On click I check if the selected value is in selected variable by indexOf() function which returns -1 if there is not. Then I push() value to the array if it's not selected yet or delete it by splice() and index of value.
Array is printed by join() function which concats each value of array,
const divList = document.querySelectorAll('.div');
const output = document.querySelector('.selectedCountry');
const countries = ['Lithuania', 'Latvia', 'Estonia'];
let selected = [];
divList.forEach((div, index) => {
div.textContent = countries[index];
div.addEventListener('click',()=> {
var indexOfDiv = selected.indexOf(countries[index]);
(indexOfDiv >= 0)
? (selected.splice(indexOfDiv,1) && div.classList.remove('selected'))
: (selected.push(div.textContent) && div.classList.add('selected'))
output.textContent = selected.join(', ');
});
});
.div { border: 1px solid lightgray; margin: 0.5rem; padding: 0.25rem 0.4rem; }
.div.selected { border-color: lightgreen; }
<div class="div div__first"></div>
<div class="div div__second"></div>
<div class="div div__third"></div>
<p>I have selected:<span class="selectedCountry"></span></p>
const countries = ['Lithuania', 'Latvia', 'Estonia'];
const divList = document.querySelectorAll('.div');
const selectedCountry = document.getElementsByClassName('selectedCountry')[0];
function clearSelection() {
divList.forEach(function(div) {
div.classList.remove('active');
})
}
divList.forEach(function(div, index){
div.textContent = countries[index];
div.addEventListener('click', function() {
clearSelection();
this.classList.add('active');
selectedCountry.innerText = document.getElementsByClassName('active')[0].innerText;
})
})
body{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
}
.div{
margin-left: 10px;
padding: 15px;
border: 2px solid black;
background-color: skyblue;
cursor: pointer;
}
p{
margin-left: 10px;
}
.active{
background-color: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<p>I have selected:<span class="selectedCountry"></span></p>
<script src="app.js"></script>
</body>
</html>
I want to replace the document.write with innerHTML. but it won’t create the links when I try it. I don’t know if there is an issue of how I am building the path variable so it won’t print out the links right. Right now it won’t print out any links.
<!DOCTYPE html>
<html lang="en">
<script>
var path = "";
var href = document.location.href;
var s = href.split("/");
for (var i=2;i<(s.length-1);i++) {
path+="<a class='crumb' href=\""+href.substring(0,href.indexOf("/"+s[i])+s[i].length+1)+"/\">"+s[i]+" </a>";
}
i=s.length-1;
path+="<a class='crumb' href=\""+href.substring(0,href.indexOf(s[i])+s[i].length)+"\">"+s[i]+" </a>";
var url = path;
//document.getElementById(".breadcrumb").innerHTML = url;
document.write(url);
</script>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/webjars/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="/webjars/bootstrap-fileinput/4.2.7/css/fileinput.min.css">
<link rel="stylesheet" href="/webjars/bootswatch/3.3.5+4/yeti/bootstrap.min.css">
<link rel="stylesheet" href="/webjars/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/webjars/jquery-ui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" href="/static/app/css/app.css">
<link rel="stylesheet" href="/static/app/css/style.css">
<script src="/webjars/jquery/2.1.4/jquery.min.js"></script>
<script src="/webjars/jquery-ui/1.12.1/jquery-ui.min.js"></script>
<script src="/webjars/bootstrap-fileinput/4.2.7/js/fileinput.js"></script>
<script src="/webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="/webjars/bootstrap-fileinput/4.2.7/js/fileinput_locale_ja.js"></script>
<script src="/static/app/js/app.js"></script>
<style>
.breadcrumb
{
witdh : 100%;
text-align: center;
border: 5px solid transparent;
}
.crumb
{
display: inline-block;
float : left;
font: 16px Helvetica, Arial, Sans-Serif;
color: white;
background-color: #4E95B6;
border: 1px solid black;
}
.crumb: hover
{
color: red;
}
</style>
</head>
<body>
{{>partials/browser-compatibility}}
<div class = "breadcrumb"> </div>
<div class="container-fluid">
you can try document.getElementsByClassName('breadcrumb')[0].innerHTML = url;
use document.ready to ensure have loaded the dom;
you have wrongly used the getElementById;
<div id ="breadcrumb"> </div>
<script>
var path = "";
var href = document.location.href;
var s = href.split("/");
for (var i=2;i<(s.length-1);i++) {
path+="<a class='crumb' href=\""+href.substring(0,href.indexOf("/"+s[i])+s[i].length+1)+"/\">"+s[i]+" </a>";
}
i=s.length-1;
path+="<a class='crumb' href=\""+href.substring(0,href.indexOf(s[i])+s[i].length)+"\">"+s[i]+" </a>";
var url = path;
document.getElementById('breadcrumb').innerHTML = url;
//document.write(url);
</script>