Develop Reference

Is it possible to get a variable or localStorage value to insert in a Web SQL code?

I've created just a simple code to simulate a virtual store with HTML, Web SQL & Javascript language and my question is: Is it possible to get a variable or localStorage value to insert in a Web SQL code?
I just need to change the code number "100013" below by a variable or localStorage item.
var bdd = openDatabase("bdLojaVirtual", "2.0", "LojaVirtual", 2000000);
var mostrar;
var button = document.getElementById("pesquisar");
button.onclick = function consultarProduto() {
var produto = document.getElementById("codigo").value;
produto = produto;
localStorage.setItem("Item selecionado", produto);
}
bdd.transaction(function (selecionar) {
var produto = localStorage.getItem("Item selecionado");
selecionar.executeSql ('SELECT nome FROM produto WHERE codigo = 100013', [],
function (selecionar, results) {
var len = results.rows.length, i;
for (i = 0; i < len; i++) {
mostrar = "<p><b>" + results.rows.item(i).nome + "</b></p>";
document.querySelector('#aqui').innerHTML += mostrar;
}
}, null);
});
The whole project is at https://github.com/jmlJunior/portifolioPessoal

After some research I got it: I've just replaced the code number "100013" by "?" and "[]" by "[produto]" and it works well.
bdd.transaction(function (selecionar) {
var produto = localStorage.getItem("Item selecionado");
selecionar.executeSql ('SELECT nome FROM produto WHERE codigo = ?', [produto],
function (selecionar, results) {
var len = results.rows.length, i;
for (i = 0; i < len; i++) {
mostrar = "<p><b>" + results.rows.item(i).nome + "</b></p>";
document.querySelector('#aqui').innerHTML += mostrar;
}
}, null);
});

New line in an output tag in JavaScript

I'm trying to show a pyramid of stars in an output tag and I can't get a new line to appear after every row? The output tag has id "result" and i can get the error messages to work if a user doesnt insert a number.
function teken(){
var resultaat =document.getElementById("result");
document.getElementById("result").innerText = "";
if(isNaN(getal.value)){
document.getElementById("result").innerText = "Een GETAL als ingave aub";
} else if(getal.value>10 || getal.value<2){
document.getElementById("result").innerText = "Getal moet groter dan 2 en kleiner dan 10 zijn"
} else {
for(var i = 1; i<= getal.value; i++){
for(var j = 1 ; j<=i;j++){
resultaat.value += "*";
}
resultaat.innerHTML += "<br>"
}
}
Thanks in advance!

Per my comment above, I think you just need resultaat.innerHTML += "*" instead of .value. Here's a trimmed down version of your code (with that edit) that works:
var resultaat = document.getElementById("result");
var n = 5;
for (var i = 1; i <= n; i++) {
for (var j = 1; j <= i; j++) {
resultaat.innerHTML += "*";
}
resultaat.innerHTML += "<br>"
}
<div id="result"></div>

Calculate the total of form immediately without having to check a checkbox

I have an HTML, JavaScript form, which calculates a price based upon choices made in the form. The problem is that the total price will only be calculated after one checkbox has been clicked. I want it to calculate the price immediately without having to check a checkbox first. Below is a snippet of the JavaScript code:
function totalIt() {
var input = document.getElementsByName("product");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value); // this function should run immediately
}
}
document.getElementById("total").value = "€" + total.toFixed(2);
}
The full form can be found here.
How can this be done?

Call the totalIt(); after loading the page.
<!-- Rekenscript om het totaal van het formulier te genereren -->
function totalIt() {
var input = document.getElementsByName("product");
var total = 0;
for (var i = 0; i < input.length; i++) {
if (input[i].checked) {
total += parseFloat(input[i].value);
}
}
document.getElementById("total").value = "€" + total.toFixed(2);
}
<!-- Checkbox switch om maandelijkse kosten aan of uit te doen -->
function showMe (box) {
var chboxs = document.getElementsByName("c1");
var vis = "none";
for(var i=0;i<chboxs.length;i++) {
if(chboxs[i].checked){
vis = "block";
break;
}
}
document.getElementById(box).style.display = vis;
}
<!-- Switch om ander thema te kiezen (met a href) -->
function toggle() {
var ele = document.getElementById("toggleText");
var text = document.getElementById("displayText");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Een ander thema kiezen";
}
else {
ele.style.display = "block";
text.innerHTML = "Huidige thema behouden";
}
}
totalIt(); // call it here

I have found a good solution. It is pretty stupid that I hadn't realised it, but unfortunately I am not that good at JavaScript.
I used the totalIt(); as #Durga suggested. I added this script around it, so that It would call the calculate function every 10ms:
window.setInterval(function(){
totalIt();
}, 10);
It doesn't matter where you place the script, as long as you don't place it in the form code, or replace any code. Of course you can change the 10ms to whatever you need. Thank you all for your answers.

how to display information underneath a specific button using javascript

I have the following piece of code I am working on. My purpose is to be able to grab information about different users from a specific website, display the name and other info and then have a button that when clicked, prints more information. I am able to get the information and display the name and picture, but when I click the button the information is displayed at the top of the page, not under the specific button that was clicked. I want for the information to be display under each user... I am new to Javascript and learning on my own, any help is appreciated!
function getUsers(user) {
var out = "";
var i;
for (i = 0; i < user.length; i++) {
out += '' + user[i].login + '<br>'+'</br> <img src="'+user[i].avatar_url+
'" alt="Image" style="width:304px;height:228px"</br></br>'+
'<button onclick=printRepos("'+user[i].repos_url+'")>Repositories</button></br>'+'<div id="id"></div>';
}
document.getElementById("id01").innerHTML = out;
}
Printing Function
function printF(array) {
var out = "";
var i;
for (i = 0; i < array.length; i++) {
out += array[i].id+'</br>';
}
document.getElementById("id").innerHTML = out;
}

This works fine. I just made div with dynamic ids and passed it to the function
function getUsers(user) {
var out = "";
var i;
for (i = 0; i < user.length; i++) {
out += '' + user[i].login + ' <br>'+'</br> <img src="'+user[i].avatar_url+
'" alt="Image" style="width:304px;height:228px"</br></br>'+
'<button onclick=printRepos("'+user[i].repos_url+'","'+i+'")>Repositories</button></br>'+'<div id="'+ 'id' + i +'"></div>';
}
document.getElementById("id01").innerHTML = out;
}
function printRepos(array, id) {
var out = "";
var i;
for (i = 0; i < array.length; i++) {
out += array[i].id+'</br>';
}
console.log('id' + id);
document.getElementById('id' + id).innerHTML = out;
}

Add the "this" keyword as a parameter to your onclicks, to pass in the button that was clicked:
<button onclick=printRepos(this,"'+user[i].repos_url+'")>Repositories</button>
Then locate the next div after that button in your event handler:
function printF(btn, array) {
var out = "";
var i;
for (i = 0; i < array.length; i++) {
out += array[i].id+'</br>';
}
// find the div
var d = btn; // start with the button
while (d.tagName != "DIV") d = d.nextSibling; // look for the next div
d.innerHTML = out;
}

Code, going through an array in javascript

'm trying to create a function that will continuously loop through an array and check if there are still elements with a certain value. If there are no more of these elements, then I would like the function to execute a certain action.
I'm checking for '0'. If nothing is ='0', then i want to display an image. Here's what I have, any suggestions?
function partiewin()
// On verifie si il y a encore des cases avec pour valeur '0' et si non, on fini la partie
{
var found=false;
for (i=1; i <= hauteur; i++)
{
for (j=1;j <= largeur; j++)
{
if( decor[i][j]!=0)
{
window.alert("You win");
found=1;
}
}
}
if(!found)
{
}
}
This is the array
var decor = new Array(hauteur);
for (i=0; i <= hauteur; i=i+1)
{
decor[i] = new Array(largeur);
}
The array is a long list of this shape :
decor[1][1] = '24'; decor[1][2] = '21'; decor[4][8]='0' ; etc
Shouldn't this work? I'm not getting any alerts or any answer whatsoever once all the '0' are technically gone from the map..

var found = false;
for(var i = 0; i < hauteur.length ; i++){
for (var j = 0; j< hauteur[i].length ; j++){
if( hauteur[i][j] == '0'){
found = true;
break;
}
}
}
if(!found){
console.log("display image code here")
}