I am trying to work with HTML 5 QR Code scanner foran attendance system.
Well I got that far, that I can scan QR Codes and push them into an array.
I can see the values of the array in the console.
Now I want that this array is shown below the QR Code Reader in my browser view.
I then want a form to submit my javascript array values to a PHP Code to use it with mysql
(Don`t know how to do that right know... :) )
My first problem: my html page is not showing anything.. it is supposed to show the values of my Code array:
<script>
var codeslz = [];
function onScanSuccess(decodedText, decodedResult) {
// handle the scanned code as you like, for example:
//console.log(`Code matched = ${decodedText}`, decodedResult);
if(codeslz.indexOf(decodedText) !== -1){
} else{
codeslz.push (decodedText);
}
console.log (codeslz);
return codeslz;
}
function onScanFailure(error) {
// handle scan failure, usually better to ignore and keep scanning.
// for example:
//console.warn(`Code scan error = ${error}`);
}
let html5QrcodeScanner = new Html5QrcodeScanner(
"reader",
{ fps: 10, qrbox: {width: 350, height: 350} },
/* verbose= */ false);
html5QrcodeScanner.render(onScanSuccess, onScanFailure);
for(var i = 0; i < codeslz.length; i++){
document.write(codeslz[i] + "<br>");
}
</script>
Later I want to automatically let the shwoing of my array be reloaded, so the user can always see the actual values of the complete array codeslz.
I think there must be sth wrong with my array codeslz.
When I fill the array like this, it works without any problems:
<html>
<head>
</head>
<body>
<script>
var codeslz = ["This", "is","a", "Test"];
for(var i = 0; i < codeslz.length; i++){
document.write(codeslz[i] + "<br>");
}
</script>
</body>
</html>
I hope someone can help me. Thanks!!!!
Kind regards
Dan
<html>
<body>
<script type="text/javascript">
var key = [["q","w","e","r","t","y","u","i","o","p"], ["a","s","d","f","g","h","j","k","l"], ["z","x","c","v","b","n","m"]];
</script>
<table>
<tr>
<td><input type = 'button' value = "key[0][1]" /></td>;
</tr>
</table>
</body>
</html>
This is a small example above, but I'm basically making an onscreen keyboard and I already have the loop which positions the buttons, however in my loop I try to assign the value of each key similarly to the code above, but instead of printing q w e r t y for each key, it prints key[row][col] for each button. How do I get the letters to appear on the button using a similar method to the above?
The below code generates the keyboard kind of layout that you are expecting:
<html>
<head>
<script type="text/javascript">
var key = [["q","w","e","r","t","y","u","i","o","p"], ["a","s","d","f","g","h","j","k","l"], ["z","x","c","v","b","n","m"]];
</script>
<body>
<script type="text/javascript">
for(var i = 0; i < key.length; i++)
{
document.write("<div>");
for(var j = 0; j < key[i].length; j++)
{
document.write("<input type='button' value='" + key[i][j] + "'/>");
}
document.write("</div>");
}
</script>
</body>
</html>
The only thing the second and third row should move right a little bit to look like real keyboard. For this we can do padding for the div tags. Hope this helps you.
Something like this?
HTML:
<input id="myInput" type="button" />
JavaScript:
var key = [["q","w","e","r","t","y","u","i","o","p"], ["a","s","d","f","g","h","j","k","l"], ["z","x","c","v","b","n","m"]];
var input = document.getElementById('myInput');
input.value = key[0][1];
That's the basic idea. You already have a loop to work with. The javascript should be after the HTML on the page. Your elements need to exist before you can grab them. Not sure if this is your precise confusion, though.
You can use javascript to create the elements, but unless there's a reason to do so, you might as well write HTML. If you're using a javascript function to generate the elements as well as fill their values in, you'll need javascript's document.createElement:
var keysArr = [["q","w","e","r","t","y","u","i","o","p"], ["a","s","d","f","g","h","j","k","l"], ["z","x","c","v","b","n","m"]];
var generateKeys = function(keys) {
for (var i = 0 ; i < keys.length ; i++) {
for (var j = 0 ; j < keys[i].length ; j++) {
var input = document.createElement('input');
input.value = key[i][j];
document.appendChild(input); // or put it wherever you need to.
}
}
}
generateKeys(keysArr);
Wrapping it in a function will also allow you to re-use the code with different keyboard layouts if you wanted to, say, let the user choose a different layout on the fly.
You will need to set them programmatically, rather than in the value attribute.
You will also need to create the tr/td/input elements within your loop programmatically, for example:
http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/
When you create the input tag programmatically, you can set the value attribute using javascript - eg.
newInput.setAttribute("value", key[rowIndex, cellindex]);
var x=5
var char="Hi!
Is there any way to make JS write char x amount of times inside of an html element?
<span>Hyper guy wants to tell you
<script>
var x=5;
var char="Hi!;
document.write(char) and repeat x times;
</script>
</span>
The problem with using document.write is that it erases the whole page, so how would I insert it in context?
Use a loop that loops 5 times, each time adding 'Hi!' onto the end.
var x = 5;
var char = '';
while (x--) {
char += 'Hi!';
}
// write once
document.write(char);
Or, you can just write 5 times:
var x = 5;
var char = 'Hi!';
while (x--) {
document.write(char);
}
Up to you which you choose, though I'd prefer the first (the less you mess with the document, the better).
try this:
<span>Hyper guy wants to tell you
<script type="text/javascript">
var x=5;
var c="Hi!"; //close the quotes.
for (;x>=0;--x)
document.write(c);
</script>
</span>
document.write(..) doesnt erase the content of the entire page, if it is used in a proper way.
Really? I'm not sure where you got the idea that it erases the page first.
When I execute the following in FF3, after adding the missing closing quote following Hi!:
<html>
<head></head>
<body>
<span>
Hyper guy wants to tell you
<script type="text/javascript">
var x=5;
var chars="Hi! ";
var i;
for (i = 0; i < x; i++) document.write(chars);
</script>
</span>
</body>
</html>
I get:
Hyper guy wants to tell you Hi! Hi! Hi! Hi! Hi!
Create a HTML element in the page where you want to insert text
Use document.getElementById to get the element and append the text to element using .innerHTML .text property to it
http://www.tizag.com/javascriptT/javascript-innerHTML.php
example:
//add this empty span in the HTML page
<span id="newText"></span>
<script type="text/javascript">
var x=5, count;
var char='Hi!', resultString = '';
for(count=0;count<x;count++)
{
resultString = resultString + char;
}
document.getElementById('newText').innerHTML = resultString;
</script>
I'm trying to get this JavaScript working:
I have an HTML email which links to this page which contains a variable in the link (index.html?content=email1). The JavaScript should replace the DIV content depending on what the variable for 'content' is.
<!-- ORIGINAL DIV -->
<div id="Email">
</div>
<!-- DIV replacement function -->
<script type="text/javascript">
function ReplaceContentInContainer(id,content) {
var container = document.getElementById(id);
container.innerHTML = content;
}
</script>
<!-- Email 1 Content -->
<script ="text/javascript">
var content = '<div class="test">Email 1 content</div>';
ReplaceContentInContainer('Email1',content);
}
</script>
<!-- Email 2 Content -->
<script ="text/javascript">
var content = '<div class="test">Email 2 content</div>';
ReplaceContentInContainer('Email2',content);
}
</script>
Any ideas what I've done wrong that is causing it not to work?
Rather than inserting the element as text into innerHTML create a DOM element, and append it manually like so:
var obj = document.createElement("div");
obj.innerText = "Email 2 content";
obj.className = "test"
document.getElementById("email").appendChild(obj);
See this working here: http://jsfiddle.net/BE8Xa/1/
EDIT
Interesting reading to help you decide if you want to use innerHTML or appendChild:
"innerHTML += ..." vs "appendChild(txtNode)"
The ReplaceContentInContainer calls specify ID's which are not present, the only ID is Email and also, how are the two scripts called, if they are in the same apge like in the example the second (with a corrected ID) would always overwrite the first and also you declare the content variable twice which is not permitted, multiple script blocks in a page share the same global namespace so any global variables has to be named uniquely.
David's on the money as to why your DOM script isn't working: there's only an 'Email' id out there, but you're referencing 'Email1' and 'Email2'.
As for grabbing the content parameter from the query string:
var content = (location.search.split(/&*content=/)[1] || '').split(/&/)[0];
I noticed you are putting a closing "}" after you call "ReplaceContentInContainer". I don't know if that is your complete problem but it would definitely cause the javascript not to parse correctly. Remove the closing "}".
With the closing "}", you are closing a block of code you never opened.
First of all, parse the query string data to find the desired content to show. To achieve this, add this function to your page:
<script type="text/javascript">
function ParseQueryString() {
var result = new Array();
var strQS = window.location.href;
var index = strQS.indexOf("?");
if (index > 0) {
var temp = strQS.split("?");
var arrData = temp[1].split("&");
for (var i = 0; i < arrData.length; i++) {
temp = arrData[i].split("=");
var key = temp[0];
var value = temp.length > 0 ? temp[1] : "";
result[key] = value;
}
}
return result;
}
</script>
Second step, have all possible DIV elements in the page, initially hidden using display: none; CSS, like this:
<div id="Email1" style="display: none;">Email 1 Content</div>
<div id="Email2" style="display: none;">Email 2 Content</div>
...
Third and final step, in the page load (after all DIV elements are loaded including the placeholder) read the query string, and if content is given, put the contents of the desired DIV into the "main" div.. here is the required code:
window.onload = function WindowLoad() {
var QS = ParseQueryString();
var contentId = QS["content"];
if (contentId) {
var source = document.getElementById(contentId);
if (source) {
var target = document.getElementById("Email");
target.innerHTML = source.innerHTML;
}
}
}
How about this? Hacky but works...
<!-- ORIGINAL DIV -->
<div id="Email"></div>
<script type="text/javascript">
function ReplaceContentInContainer(id,content) {
var container = document.getElementById(id);
var txt = document.createTextNode(content);
container.appendChild(txt);
}
window.onload = function() {
var args = document.location.search.substr(1, document.location.search.length).split('&');
var key_value = args[0].split('=');
ReplaceContentInContainer('Email', key_value[1]);
}
</script>
I'm running the following code. The button basically adds a chart into the html page. The problem I'm facing is: when I click on the button for the second time, the curve of the former chart fades away (though the labels don't), and I want it to stay. I've tried to debug and this happens when I modify the innerHTML property right at the beginning of the buttonClicked javascript function. Can anybody tell me why is this happening?
<html>
<head>
<title>Configurando gráficos</title>
<script language="javascript" type="text/javascript" src="../scripts/jquery.js"></script>
<script language="javascript" type="text/javascript" src="../scripts/jquery.flot.js"></script>
<script type="text/javascript" language="javascript">
var id = 0;
function requestGraph(placeholder) {
$.ajax({url: "../requests/get_xml_oid.php?oid=1.3.6.1.2.1.2.2.1.10.65540&host=200.234.199.161", success: function(request){
// Initialize dataToDraw to an empty array
var dataToDraw = [];
// The first tag is called ifInOctets
var ifInOctetsEl = request.getElementsByTagName("ifInOctets")[0];
// Store the data element, to loop over the time-value pairs
var dataEl = ifInOctetsEl.getElementsByTagName("data");
// For each data element, except the first one
var i;
for (i=1; i<dataEl.length; i++){
// get the time-value pair
var timeEl = dataEl[i].getElementsByTagName("time")[0];
var valueEl = dataEl[i].getElementsByTagName("value")[0];
var time = timeEl.textContent;
var value = valueEl.textContent;
// get the value of the former data element
// Warning: the former value in the XML file is newer than the latter
var formerValueEl = dataEl[i-1].getElementsByTagName("value")[0];
var formerValue = formerValueEl.textContent;
// push to the dataToDraw array
dataToDraw.push( [parseInt(time)*1000, parseInt(formerValue) - parseInt(value)]);
}
// tell the chart that the x axis is a time variable
var options = {
xaxis: { mode: "time"}
};
// plot the chart and place it into the placeholder
jQuery.plot(jQuery(placeholder), [dataToDraw], options);
}});
}
function buttonClicked() {
document.getElementById("body").innerHTML += "<div id=\"placeholder" + id + "\" style=\"width:600px;height:300px;\"></div>";
requestGraph("#placeholder" + id);
setInterval("requestGraph(\"#placeholder" + id + "\")",60000);
id = id + 1;
}
</script>
</head>
<body id="body">
<button type="button" onClick="buttonClicked()">Click Me!</button>
</body>
</html>
According to this previous question, assigning to innerHTML destroys child elements. It's not clear to me that this is exactly what you're seeing, but perhaps using document.createElement as suggested in the similar question will work for you as well.