I coded a vertical tab in test.html and it works when I open it up with my browser from my hard drive. It looks like this:
Correct display
but when I open the webpage using github, it no longer display properly. It becomes this:
Wrong display
Please, what could be the problem? This is my code:
<script>
function openFood(evt, foodName)
{
var i, x, tablinks;
x = document.getElementsByClassName("food");
for (i = 0; i < x.length; i++)
{
x[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < x.length; i++)
{
tablinks[i].className = tablinks[i].className.replace(" w3-red", "");
}
document.getElementById(foodName).style.display = "block";
evt.currentTarget.className += " w3-red";
}
</script>
<!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">
<title>Test</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
<link href='http://www.w3schools.com/lib/w3.css' rel='stylesheet' type='text/css'>
</head>
<nav class="w3-sidenav w3-light-grey w3-card-2" id="size">
<div class="w3-container">
<h5><b>Category</b></h5>
</div>
Rice
Noodles
Chicken
Beef
</nav>
I figured out the problem. My browser blocked parts of the page due to weak encryption.
view
Related
my code depends on creating an EventListener inside a loop then removing it after the function is done, yet somehow on the Eventlitesning is repeated after each loop execution, my code looks something like:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link href="css/style.css" rel="stylesheet"> -->
</head>
<body>
<button id="btn" onclick="fun()">button</button>
</body>
<script>
const btn=document.getElementById("btn");
console.log(btn);
function fun(){
for (let i = 0; i < 5; i++) {
btn.addEventListener("click", ()=>{alert(`warning NO.${i}`)});
//code to be executed
btn.removeEventListener("click", ()=>{alert(`warning NO.${i}`)});
}
}
</script>
</html>
the first time I press the button the 5 warning messages appear and the second time I press the button the 5 warnings messages appear twice, an dun the third time it appears 3 times, and so on.
I'd be very grateful if anyone could support me in this issue.
I tried to do the following but it didn't work either:
const btn=document.getElementById("btn");
function fun(){
for (let i = 0; i < 5; i++) {
btn.removeEventListener("click", ()=>{alert(`warning NO.${i}`)});
btn.addEventListener("click", ()=>{alert(`warning NO.${i}`)});
//code to be executed
btn.removeEventListener("click", ()=>{alert(`warning NO.${i}`)});
}
}
Does this code satisfy your requirement?
Note: onclick() itself is an event listener.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link href="css/style.css" rel="stylesheet"> -->
</head>
<body>
<button id="btn" onclick="fun()">button</button>
</body>
<script>
function fun(){
for (let i = 0; i < 5; i++) {
alert(`warning NO.${i}`);
}
}
</script>
</html>
New to javascript so please be kind.
I am trying to loop over a all the elements in the "wrapper" class to show each element for x amount of time. This code just shows all elements at once.
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>Cell One</title>
</head>
<body>
<div class="wrapper">
<div class="x" id="inner">
<p>Test</p>
</div>
<div class="x" id="inner">
<p>Testing</p>
</div>
</div>
<script src="./main.js"></script>
</body>
</html>
Javascript
var divOne = document.getElementsByClassName('x')
console.log(divOne.length)
for (let i=0, len = divOne.length; i < len; i++) {
setTimeout(() => {
divOne[i].style.display = 'none';
}, 5000)
}
The reason is due to below code
setTimeout(() => {
divOne[i].style.display = 'none';
}, 5000)
Which will make all the element hide after 5000 millseconds,so you need to set them sepeartely
var divOne = document.getElementsByClassName('x')
for (let i=0, len = divOne.length; i < len; i++) {
setTimeout(() => {
for(let j=0;j<len;j++){
if(j==i){
divOne[j].style.display = 'inline-block';
}else{
divOne[j].style.display = 'none';
}
}
}, 5000*i)
}
.x{
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.0">
<link rel="stylesheet" href="./style.css">
<title>Cell One</title>
</head>
<body>
<div class="wrapper">
<div class="x" id="inner">
<p>Test</p>
</div>
<div class="x" id="inner">
<p>Testing</p>
</div>
</div>
<script src="./main.js"></script>
</body>
</html>
The setTimeout waits the 5000ms specified. The reason to hide all elements at the same time is that this code have created all Timeouts with same executing time, making all Timeouts runs at the same time.
The solution is when create the Timeout, pass the ms duration major of the previous, can be done like this:
for (let i=0, len = divOne.length; i < len; i++) {
setTimeout(() => {
divOne[i].style.display = 'none';
}, 5000 * (i+1))
}
Look at the second parameter of setTimeout, we add the 5000ms multiplicated by index of loop + 1 (because the var i starts with 0).
Try code:
var divOne = document.getElementsByClassName('x')
console.log(divOne.length)
for (let i=0, len = divOne.length; i < len; i++) {
setTimeout(() => {
divOne[i].style.display = 'none';
}, 5000 * (i+1))
}
<!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>Cell One</title>
</head>
<body>
<div class="wrapper">
<div class="x" id="inner">
<p>Test</p>
</div>
<div class="x" id="inner">
<p>Testing</p>
</div>
</div>
</body>
</html>
To loop over a all the elements in the "wrapper" class to show each element for x amount of time
Lets try this code
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>Cell One</title>
</head>
<body>
<div class="wrapper">
<div class="x" id="inner">
<p>Test</p>
</div>
<div class="x" id="inner">
<p>Testing</p>
</div>
</div>
<script src="./main.js"></script>
</body>
</html>
here is a JavaScript code which will iterate loop over class name x and hide them with x amount of time one by one
Javascript
let x = document.querySelectorAll('.x')
for (let i=0; i < x.length; i++)
{
setTimeout(() => {x[i].style.display = 'none';},5000*i+1)
}
My javascript code is not responding at all. Even simple codes like alert("Hello World"); both external files and internal scripts, jQuery etc are not all responding
example
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="./assets/Animate CSS/animate.min.css">
<link rel="stylesheet" href="./assets/OWL JS/owl.carousel.min.css">
<link rel="stylesheet" href="./assets/Bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="./assets/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 class="animate__animated right-0 wow animate__zoomIn bg-primary"><span class="fa fa-bars"></span> Hello World</h1>
<div class="wow backInRight">
Content to Reveal Here
</div>
<noscript>Hello</noscript>
<script>
new WOW().init();
alert("Hello word");
for (i = 0; i < 10; i++) {
alert("Hello" + i);
}
</script>
<script src="./assets/JQuery/jquery.min.js"></script>
<script src="./assets/Popper JS/popper.min.js"></script>
<script src="./assets/Wow JS/wow.js"></script>
<script src="./assets/Bootstrap/bootstrap.min.js"></script>
<script src="./assets/OWL JS/owl.carousel.min.js"></script>
</body>
</html>```
Could anybody perhaps suggest why the following code would not store the stylsheet choice.
SETTINGS.PHP
<?php
session_start();
?>
<!doctype html>
<html>
<head>
<script type="text/javascript">
function changeStyle(title) {
var lnks = document.getElementsByTagName('link');
for (var i = lnks.length - 1; i >= 0; i--) {
if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title')) {
lnks[i].disabled = true;
if (lnks[i].getAttribute('title') == title) lnks[i].disabled = false;
}}}
function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("title")
&& !a.disabled) return a.getAttribute("title");
}
return null;
}
localStorage.setItem('activeStylesheet', getActiveStyleSheet())
</script>
<meta charset="utf-8">
<title>Intapp.Com</title>
<link rel="stylesheet" type="text/css" href="dwcss.css">
<link rel="alternate stylesheet" type="text/css" title="girly" href="style1.css">
<link rel="alternate stylesheet" type="text/css" title="default" href="dwcss.css">
<link rel="alternate stylesheet" type="text/css" title="neutral" href="style2.css">
<meta name="viewport" content="width=320.1, initial-scale=1.0, user-scalable=0 minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>
<body>
<div class="header">
<h1> User Settings </h1>
</div>
<div id="box2">
To change to this style click here
<button onclick="changeStyle('girly')">Girly</button>
<button onclick="changeStyle('default')">Default</button>
<button onclick="changeStyle('neutral')">Neutral</button>
</div>
<div class="footer">
</div>
</body>
</html>
this is where i am trying to retrieve the local storage value when i test in the browser the default stylsheet is activated on index.php, i can't see what i'm doing wrong if anyone could help it would be greatly appreciated.
INDEX.PHP
<html>
<head>
<script>
window.onload=setstyle()
{
localStorage.getItem('activeStylesheet')
}
</script>
<meta charset="utf-8">
<link rel="apple-touch-startup-image" href="appsplash.png">
<title>Intapp.Com</title>
<link rel="stylesheet" type="text/css" href="dwcss.css">
<link rel="alternate stylesheet" type="text/css" title="default" href="dwcss.css">
<link rel="alternate stylesheet" type="text/css" title="neutral" href="style2.css">
<meta name="viewport" content="width=320.1, initial-scale=1.0, user-scalable=0 minimum-scale=1.0, maximum-scale=1.0">
<link rel="apple-touch-icon" href="applogo.png"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
</head>
In getActiveStylesheet, your for loop is setting a to document.getElementsByTagName("link") each iteration, while you should be iterating through it:
function getActiveStyleSheet() {
var lnks = document.getElementsByTagName('link');
for (var i = lnks.length - 1; i >= 0; i--) {
if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title') && !lnks[i].disabled) {
return lnks[i].getAttribute("title");
}
}
return null;
}
Also, instead of setting activeStylesheet when the page loads, you should set it every time the style is changed, i.e. at the end of changeStyle:
function changeStyle(title) {
var lnks = document.getElementsByTagName('link');
for (var i = lnks.length - 1; i >= 0; i--) {
if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title')) {
lnks[i].disabled = true;
if (lnks[i].getAttribute('title') == title) lnks[i].disabled = false;
}
}
localStorage.setItem('activeStylesheet', getActiveStyleSheet())
}
On index.php, there should be code to actually set the style, such as:
window.onload = function () {
var
lnks = document.getElementsByTagName('link'),
activeStylesheet = localStorage.getItem('activeStylesheet');
for (var i = lnks.length - 1; i >= 0; i--)
if (lnks[i].getAttribute('rel').indexOf('style') > -1 && lnks[i].getAttribute('title'))
lnks[i].disabled = lnks[i].getAttribute('title') != activeStylesheet;
};
Of course, you should try to factor out the duplicate code shared between these three code blocks at some point.
PS: In general, if you indent your code, it'll be far easier to read.
I'm assuming you transitively copied this code from http://alistapart.com/article/alternate. If so, you may be able to just use http://d.alistapart.com/alternate/styleswitcher.js, with the following changes:
Replace calls to readCookie(name) with calls to localStorage.getItem(name)
Replace calls to createCookie(name, value, days) with calls to localStorage.setItem(name, value)
I am trying to make a dynamic list in HTML, I'm using a string array as data for the list, this array is OK, it has some string inside, I verified it.So this is my code:
function add_li(list, text) {
var list = document.getElementById(list);
var li = document.createElement("li");
li.innerHTML = text;
list.appendChild(li);
}
function load_list(list, list_array) {
for (var i = 0; i < list_array.length; i++) {
add_li (list, list_array[i]);
}
}
Here's the call:
load_list(lista_bodegas, Bodegas);
Html where the is:
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../css/main.css">
<script type="text/javascript" src="../../js/main.js"></script>
<script type="text/javascript" src="../../js/cordova-2.3.0.js"></script>
<meta name="viewport" id="viewport" content="width=device-width, height=device-height, minimum-scale=1, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>
</title>
</head>
<body onload= "cargarBodegas();">
<ul id= "lista_bodegas">
</ul>
</body>
</html>
Try using
load_list("lista_bodegas", Bodegas);
instead of
load_list(lista_bodegas, Bodegas);