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);
Related
I'm trying to read all the values of an attribute my page an get, for each attribute (some attribute can has multiple value separate by comma) the div id
This is my html page:
const elements = document.querySelectorAll('[data-att]');
let obj = {};
elements.forEach(function(element) {
let v = element.getAttribute('data-att');
let id = element.id;
comma = v.includes(",");
if (comma) {
s = v.split(",");
s.forEach(function(single) {
obj[single] = {
id: id
};
});
} else {
obj[v] = {
id: id
};
}
});
console.log(obj);
<!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>Document</title>
</head>
<body>
<div id="due" data-att="foo"></div>
<div id="uno" data-att="foo"></div>
<div id="tre" data-att="foo,bar"></div>
<div id="quattro" data-att="brum"></div>
<div id="cinque" data-att="foo,brum"></div>
</body>
</html>
What's the problem?
At the moment i needed to assign the attrbute id using obj[single] = {id: id}; cause i tried to make a obj[single].push(id); but I get error
Anyone can hel me to reach this resoult:
{
"foo": {
['due','uno','tre','cinque']
},
"bar": {
['tre']
},
"brum": {
['cinque']
}
}
I think this is what you need:
const elements = document.querySelectorAll('[data-att]');
let obj = {};
elements.forEach(el => {
const keys = el.dataset.att.split(',');
keys.forEach(key => {
if(obj[key] === undefined){
obj[key] = [];
}
obj[key].push(el.id)
})
})
console.log(obj);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<div id="due" data-att="foo"></div>
<div id="uno" data-att="foo"></div>
<div id="tre" data-att="foo,bar"></div>
<div id="quattro" data-att="brum"></div>
<div id="cinque" data-att="foo,brum"></div>
</body>
</html>
The result is not the same you posted, i think you made a mistake there, or was it me? :)
Check if the property already exists. If it does, push onto the array, otherwise create the array.
There's no need for if (comma). Splitting a string with no comma will return an array with a single element, you can loop over this with forEach().
const elements = document.querySelectorAll('[data-att]');
let obj = {};
elements.forEach(function(element) {
let v = element.getAttribute('data-att');
let id = element.id;
s = v.split(",");
s.forEach(function(single) {
if (obj[single]) {
obj[single].push(id);
} else {
obj[single] = [id];
}
});
});
console.log(obj);
<!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>Document</title>
</head>
<body>
<div id="due" data-att="foo"></div>
<div id="uno" data-att="foo"></div>
<div id="tre" data-att="foo,bar"></div>
<div id="quattro" data-att="brum"></div>
<div id="cinque" data-att="foo,brum"></div>
</body>
</html>
It doesnt show anything on the browser if I use createElement, but if I previusly add an empty <ul> in the HTML and use the code in the comments it works.
let ul = document.createElement('ul'); //If instead of this
/*let ul = document.querySelector('ul');*/ //Use this, it works
let fragmento = document.createDocumentFragment();
for (var i = 0; i < 10; i++) {
let li = document.createElement('li');
li.innerText = "item " + i;
fragmento.appendChild(li)
}
ul.appendChild(fragmento);
<!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>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<!--<ul></ul>-->
<script src="main.js"></script>
</body>
</html>
let ul = document.createElement('ul'); creates the element but it's not attached to the document. You try to do that with ul.appendChild(fragmento);, but as you found, that only works if the element is already in the document. Use another element like body with: document.querySelector('body').appendChild(fragmento);.
How do I delete each letter the textcontent of a paragraph element at each keydown on the backspace key button like the input field remove one letter at time.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p></p>
<script>
let p = document.querySelector("p")
document.addEventListener("keydown",function(e){
if(e.key === "Backspace"){
p.textContent-=e.key;
}else{
p.textContent+=e.key
}
})
</script>
</body>
</html>
Instead of p.textContent-=e.key; do p.textContent = p.textContent.slice(0, -1);.
This is the code to get temperature of London from weather API. It works correctly (images are local hence won't show):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/body.css" />
<meta name="msapplication-tap-highlight" content="no" />
</head>
<body>
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<script language="javascript" type="text/javascript">
<!--
function foo(callback) {
$.ajax({
url: "http://api.openweathermap.org/data/2.5/weather?q=London",
dataType: 'JSON',
success: callback
});
}
function myCallback(result) {
var temp = JSON.stringify(JSON.parse(result.main.temp));
var Kelvin = 272;
var Centigrade = Math.round(temp-Kelvin);
if (Centigrade <= 25) {
//alert("Temperature : "+Math.round(Centigrade)+" C");
var temp = document.getElementById("temp");
temp.style.fontSize = "20px";
temp.innerHTML = Centigrade+"° C , Cool "+"<img src= \"img/Tlogo2.svg\"/>";
//document.getElementById("temp").innerHTML = Centigrade+"° C , Cool "+"<img src= \"img/Tlogo2.svg\"/>";
}
else if (Centigrade > 25) {
var temp = document.getElementById("temp");
temp.style.fontSize = "20px";
temp.innerHTML = Centigrade+"° C , Cool "+"<img src= \"img/Tlogo3.svg\"/>";
//document.getElementById("temp").innerHTML = Centigrade+"° C , It's Hot !!! "+"<img src= \"img/Tlogo3.svg\"/>";
}
}
</script>
<div style="position: absolute; left: 30px; top: 75px;">
<img src="img/temlogo.svg" width="35" height="35" onclick="foo(myCallback);"/>
</div>
<p id="temp"></p>
</body>
</html>
From tutorials point and Bootstrap website I have tried to use a dissmissable popover. It works fine too:
<!DOCTYPE html>
<html>
<body>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$("[data-toggle='popover']").popover();
});
</script>
</body>
Temperature
</html>
Now what I am trying is I want get temperature as popover element. ie. if I click on image button, it should trigger temperature acquiring function and then show the temperature and the image related to that in popover box. So here is two challenge I am facing.
Setting a image instead of the red button and then temperature data
List item and the image ie. Tlogo2.svg to be appeared in that pop over box.
So can anyone suggest how to set that?
EDIT : I have tried this to attain what I said. but nothing happened. The code goes here:
<!DOCTYPE html>
<html>
<body>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script language="javascript" type="text/javascript">
//Function
function foo(callback) {
$.ajax({
url: "http://api.openweathermap.org/data/2.5/weather?q=London",
dataType: 'JSON',
success: callback
});
}
function myCallback(result) {
var temp = JSON.stringify(JSON.parse(result.main.temp));
var Kelvin = 272;
var Centigrade = temp-Kelvin;
alert("Temperature : "+Math.round(Centigrade)+" C");
//document.getElementById("temp").innerHTML = "Temperature : "+Math.round(Centigrade)+" C";
}
$(function() {
$("[data-toggle='popover']").popover(myCallback(result));
});
</script>
</body>
Temperature
</html>
I am adding some addition. SO that people don't get confuse and see what really I want. I want the result of the function ie temperature is 23 C to that pop over element
The code:
<!DOCTYPE html>
<html>
<body>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.jquery.com/jquery-2.0.0.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script language="javascript" type="text/javascript">
//Function
function foo(callback) {
$.ajax({
url: "http://api.openweathermap.org/data/2.5/weather?q=London",
dataType: 'JSON',
success: callback
});
}
function myCallback(result) {
var temp = JSON.stringify(JSON.parse(result.main.temp));
var Kelvin = 272;
var Centigrade = temp-Kelvin;
alert("Temperature : "+Math.round(Centigrade)+" C");
//document.getElementById("temp").innerHTML = "Temperature : "+Math.round(Centigrade)+" C";
}
$(function() {
$("[data-toggle='popover']").popover(myCallback);
});
</script>
</body>
<a href="#" tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Temperature" data-content= "myCallback(result);" >Temperature</a>
</html>
So let me know where I need to change.
Maybe you can do popover on hover, here is example
$(function() {
$('[title]').attr("data-rel", "tooltip");
$("[data-rel='tooltip']")
.attr("data-placement", "top")
.attr("data-content", function() {
return $(this).attr("title")
})
.removeAttr('title');
var showPopover = function() {
$(this).popover('show');
};
var hidePopover = function() {
$(this).popover('hide');
};
$("[data-rel='tooltip']").popover({
trigger: 'manual'
}).click(showPopover).hover(showPopover, hidePopover);
});
Use it like this
Temperature
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)