Hello everybody i am trying to refresh a div in javascript every 1 second i have got one of the variables to refresh but cannot seem to get the second one to refresh.
I am looking to refresh the text with the id of refresh1 either correct or incorrect
many thanks in advance.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Binary Learning Tool!</title>
<meta name="description" content="Change image on click with jQuery">
<meta name="keywords" content="Change image on click with jQuery">
<meta name="author" content="">
<link rel="stylesheet" href="style.css" media="all" type="text/css">
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
</head>
<body>
<script type='text/javascript'>
var total=1;
var answer;
var randnum=(Math.floor(Math.random() * 2 + 1))
document.write(randnum);
</script>
</br></br></br></br>
</br>
<img
id="num1" onclick="swapImage1( 'num1','/img/1.png','/img/0.png');" src="/img/0.png" alt="num1" value="32"
/>
<img
id="num2" onclick="swapImage2( 'num2','/img/1.png','/img/0.png');" src="/img/0.png" alt="num2" value="16"
/>
<img
id="num3" onclick="swapImage3( 'num3','/img/1.png','/img/0.png');" src="/img/0.png" alt="num3" value="8"
/>
<img
id="num4" onclick="swapImage4( 'num4','/img/1.png','/img/0.png');" src="/img/0.png" alt="num4" value="4"
/>
<img
id="num5" onclick="swapImage5( 'num5','/img/1.png','/img/0.png');" src="/img/0.png" alt="num5" value="2"
/>
<img
id="num6" onclick="swapImage6( 'num6','/img/1.png','/img/0.png');" src="/img/1.png" alt="num6" value="1"
/>
</body>
<script type="text/javascript" src="var.js"></script>
</html>
</br></br>
<head>
<script langauge="javascript">
window.setInterval("refreshDiv()", 1);
function refreshDiv(){
document.getElementById("refresh").innerHTML = + total;
}
</script>
<script langauge="javascript">
window.setInterval("refreshDiv()", 1);
function refreshDiv(){
document.getElementById("refresh1").innerHTML;
}
</script>
</head>
<div id="refresh">
<script type="text/javascript">
document.write(total);
</script>
</div></br>
<div id="refresh1">
<script type="text/javascript">
if (total === randnum)
{
answer=("Correct");
document.write(answer);
}
else
{
answer=("Incorrect");
document.write(answer);
}
</script></div></br></br>
<input type="button" value="Restart" onClick="history.go(0)">
So, I don't really get, what you want to do, but I tried to realize what you want to do:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Binary Learning Tool!</title>
<meta charset="utf-8">
<meta name="description" content="Change image on click with jQuery">
<meta name="keywords" content="Change image on click with jQuery">
<meta name="author" content="">
<link rel="stylesheet" href="style.css" media="all" type="text/css">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<script type="text/javascript">
// Define your Variables
var total = 1;
var answer = '';
var randnum = (Math.floor(Math.random() * 2 + 1));
// This function decides whether 'correct' or 'incorrect' should be displayed
function decide_refresh1(tot,rand) {
if(tot == rand) {
return 'correct';
}
return 'incorrect';
}
// This function is called when you click on one of your images, and just calls the decide_refresh1() function and writes the result to the div refresh1.
function reload_refresh1(triggering_object) {
$('#refresh1').html(decide_refresh1(total,randnum));
}
// Code's executed after Website has finsihed loading
$(document).ready(function () {
// Save your divs to variables, makes easier accessable
var div_randum = $('#div_randum');
var div_refresh = $('#refresh');
var div_refresh1 = $('#refresh1');
// Write randnum to div_randnum and total to refresh
div_randum.html('Randnum: '+randnum);
div_refresh.html('Total: '+total);
// Fill refresh1 with correct or incorrect
div_refresh1.html(decide_refresh1(total,randnum));
});
</script>
</head>
<body>
</br>
</br>
</br>
<div id="div_randum"></div>
</br>
<img id="num1" onclick="reload_refresh1(this);" src="/img/0.png" alt="num1" value="32"/>
<img id="num2" onclick="reload_refresh1(this);" src="/img/0.png" alt="num2" value="16" />
<img id="num3" onclick="reload_refresh1(this);" src="/img/0.png" alt="num3" value="8" />
<img id="num4" onclick="reload_refresh1(this);" src="/img/0.png" alt="num4" value="4" />
<img id="num5" onclick="reload_refresh1(this);" src="/img/0.png" alt="num5" value="2" />
<img id="num6" onclick="reload_refresh1(this);" src="/img/1.png" alt="num6" value="1" />
</br>
</br>
<div id="refresh"></div>
</br>
<div id="refresh1"></div>
</br>
</br>
<input type="button" value="Restart" onClick="history.go(0)">
</body>
</html>
I know it is not exactly what you want, but maybe it's a good start. If you have problems, just ask ;-)
Btw: Your source is hell of a mess.
Btw2: Removed your "swap_image();" function for simplicity
Looks like there is an error in your refreshDiv() calls.
Your code:
s<script langauge="javascript">
window.setInterval("refreshDiv()", 1);
function refreshDiv(){
document.getElementById("refresh").innerHTML = + total;
}
</script>
<script langauge="javascript">
window.setInterval("refreshDiv()", 1);
function refreshDiv(){
document.getElementById("refresh1").innerHTML;
}
I suggest not having 2 functions named refreshDiv(). Also, the second RefreshDiv does not have any code to update! The first refreshDiv() has
document.getElementById("refresh").innerHTML = + total
The second one does not.
HTH!
Related
I am developing a system, where the user will have to make the payment via credit card. When he starts typing the first numbers on the card, the flag will be automatically identified and selected. I don't know much about jQuery or JavaScript.
JS
var cartoes = {
visa: /^4[0-9]{12}(?:[0-9]{3})/,
mast: /^5[1-5][0-9]{14}/,
diners: /^3(?:0[0-5]|[68][0-9])[0-9]{11}/,
amex: /^3[47][0-9]{13}/,
discover: /^6(?:011|5[0-9]{2})[0-9]{12}/,
hipercard: /^(606282\d{10}(\d{3})?)|(3841\d{15})/,
elo: /^((((636368)|(438935)|(504175)|(451416)|(636297))\d{0,10})|((5067)|(4576)|(4011))\d{0,12})/
};
The problem is that when entering the flag it is not working, that is, he is not selecting the flag as I type the card number. I tried with the cards I have: MasterCard, Amex and Visa. I will put the complete code.
var cartoes = {
visa: /^4[0-9]{12}(?:[0-9]{3})/,
mast: /^5[1-5][0-9]{14}/,
diners: /^3(?:0[0-5]|[68][0-9])[0-9]{11}/,
amex: /^3[47][0-9]{13}/,
discover: /^6(?:011|5[0-9]{2})[0-9]{12}/,
hipercard: /^(606282\d{10}(\d{3})?)|(3841\d{15})/,
elo: /^((((636368)|(438935)|(504175)|(451416)|(636297))\d{0,10})|((5067)|(4576)|(4011))\d{0,12})/
};
document.getElementById('num').addEventListener('keyup', testarCC);
var inputs = document.querySelectorAll('.fsResDir input[type="radio"]');
function testarCC(e) {
var nr = this.value;
var tipo;
for (var cartao in cartoes)
if (nr.match(cartoes[cartao])) tipo = cartao;
// alert(tipo);
if (tipo) document.getElementById(tipo).click();
else
for (var i = 0; i < inputs.length; i++) inputs[i].checked = false;
}
<!DOCTYPE html>
<html lang="pt-br">
<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>Testando a Braspag</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>
<body>
<fieldset class="fsResDir">
<legend>Dados do Cartão </legend>
<input type="radio" name="RadBand" id="visa" />
<label for="visa">
<img src="bandeiras/visa.png" style="width: 90px" />
</label>
<input type="radio" name="RadBand" id="mast" />
<label for="mast">
<img src="bandeiras/mastercard.png" style="width: 90px"/>
</label>
<input type="radio" name="RadBand" id="amex" />
<label for="amex">
<img src="bandeiras/amex.png" style="width: 90px"/>
</label>
<label for="val" class="lab90">Validade:</label>
<input type="text" class="ent20Form" id="val" name="TxtValMes" class="form-control" />/
<input type="text" class="ent40Form" name="TxtValAno" class="form-control" />
<label for="num" class="lab90">Numero:</label>
<input type=text class="ent120Form" id="num" name="TxtNumero" class="form-control" />
</fieldset>
</body>
</html>
JavaScript codes and HTML codes
I'm trying to put a generated value of the qr code a input text to be save in my SQLite database can't pust the darn value of the qr code
var resultDiv;
document.addEventListener("deviceready", init, false);
function init() {
document.querySelector("#startScan").
addEventListener("touchend", startScan, false);
resultDiv = document.querySelector("#results");//works in <p id="results"></p>
resultDiv = document.querySelector('#text4');//wont work at all <input id="text4" type="text" placeholder="Book Info"/>
}
function startScan() {
cordova.plugins.barcodeScanner.scan(
function (result) {
var s = result.text.split('|');
result.format;
result.cancelled;
resultDiv.innerHTML = s;
},
function (error) {
alert("Scanning failed: " + error);
}
);
}
JavaScript codes and HTML codes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>qrBorrowers</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<nav>
<div class="topnav">
Add
Borrow
Return
QR code
</div>
</nav>
<Label>
<h1> Borrow a Book </h1>
</Label>
<div class="borrow">
<input id="text1" type="text" placeholder="Borrower Number" onfocus="this.value=''"/>
<input id="text2" type="text" placeholder="Borrower Last Name" onfocus="this.value=''" />
<input id="text3" type="text" placeholder="Borrower First Name" onfocus="this.value=''" />
<input id="text4" type="text" placeholder="Book Info"/>
<input id="text6" type="date" placeholder="Date Borrowed" />
<br>
</div>
<div class="borrow">
<p id="results"></p>
<button id="startScan">Start Scan</button>
<button id="savedb">Save </button>
</div>
<script type="text/javascript" src="js/scanQR.js"></script>
</body>
</html>
With inner HTML it will not going to save your generated QR code to input box. You need to change the innerHTML to value to save the value in input box such that you can use that when form submit as value to save in database.
var resultDiv;
document.addEventListener("deviceready", init, false);
function init() {
document.querySelector("#startScan").
addEventListener("touchend", startScan, false);
resultDiv = document.querySelector("#results");//works in <p id="results"></p>
resultDiv = document.querySelector('#text4');//wont work at all <input id="text4" type="text" placeholder="Book Info"/>
}
function startScan() {
cordova.plugins.barcodeScanner.scan(
function (result) {
var s = result.text.split('|');
result.format;
result.cancelled;
resultDiv.value = s;
},
function (error) {
alert("Scanning failed: " + error);
}
);
}
JavaScript codes and HTML codes
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>qrBorrowers</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<nav>
<div class="topnav">
Add
Borrow
Return
QR code
</div>
</nav>
<Label>
<h1> Borrow a Book </h1>
</Label>
<div class="borrow">
<input id="text1" type="text" placeholder="Borrower Number" onfocus="this.value=''"/>
<input id="text2" type="text" placeholder="Borrower Last Name" onfocus="this.value=''" />
<input id="text3" type="text" placeholder="Borrower First Name" onfocus="this.value=''" />
<input id="text4" type="text" placeholder="Book Info"/>
<input id="text6" type="date" placeholder="Date Borrowed" />
<br>
</div>
<div class="borrow">
<p id="results"></p>
<button id="startScan">Start Scan</button>
<button id="savedb">Save </button>
</div>
<script type="text/javascript" src="js/scanQR.js"></script>
</body>
</html>
To save the value in input box should not use "resultDiv.innerHTML = s;"
Rather you should use "resultDiv.value = s" which will save your code to input box which you can use to save in SQLite Database.
Tooltip display content how to show as below format
Please help me
"Dynamic_value" values are coming from function in variable and i want to display
as below format
Selection Parameters
Selection Date - Dynamic_value
Unit Value- Dynamic_value
list - Dynamic_value
below is example of code
<label id="lblName" for="txtName" title="Full Name">Name</label>
<input id="txtName" type="text" title="Your full name as it appears in paasport" />
<meta charset="utf-8">
<title>tooltip demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#txtName').tooltip({
content: toolTipFunction
});
function toolTipFunction() {
var texdisp = 'Selection Date - Dynamic_value; Unit Value- Dynamic_value; list - Dynamic_value';
return texdisp
}
});
</script>
If I am understanding the question correctly, you're just struggling to include line breaks where you want them. This can be done simply by including <br /> elements in the texdisp string.
<label id="lblName" for="txtName" title="Full Name">Name</label>
<input id="txtName" type="text" title="Your full name as it appears in paasport" />
<meta charset="utf-8">
<title>tooltip demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#txtName').tooltip({
content: toolTipFunction
});
function toolTipFunction() {
var texdisp = 'Selection Date - Dynamic_value;<br /><br /> Unit Value- Dynamic_value;<br /><br /> list - Dynamic_value';
return texdisp
}
});
</script>
In this code i try to get the difference between two date and time
ex(09/05/2014 09:10:00 - 09/05/2014 11:18:00 ) it should return 78 minutes with a single function for multiple textboxes but unfortunately this piece of code is not working can some one suggest me the correct code or is there is any alternative way to perform this function , thanks in advance.
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="JS/datejquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
$("id^='endTime'".change(function(){
var index = $(this).attr('id').replace('endTime','');
alert(index);
var startTime = $('#startTime'+index).val();
var endTime = $(this).val();
$('#result'+index).val(endTime-startTime);
});
} );
</script>
</head>
<body>
<form name="wrs">
<input type="text" name="time1" id= "startTime1" class="num-box type1" />
<input type="text" name="time2" id = "endTime1" class="num-box type2" />
<input type="text" name="result1" class="num-box type5" />
<input type="text" name="startTime2" id= "time3" class="num-box type3" />
<input type="text" name="endTime2" id = "time4" class="num-box type4" />
<input type="text" name="result2" class="num-box type6" />
</form>
</body>
</html>
You missed the brackets.
$("[id^='endTime']").change(function(){
var index = $(this).attr('id').slice(7);
alert(index);
var startTime = $('#startTime'+index).val();
var endTime = $(this).val();
$('#result'+index).val(endTime-startTime);
});
I have this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The management panel</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.min.js'></script>
<script type="text/javascript">
function markPercentages(){
var checked = $(':checked');
var percentage = Math.round((1 / checked.length) * 100);
checked.siblings('.percentage').html(percentage);
$('input[type=checkbox]').not(checked).siblings('.percentage').html('0');
}
</script>
</head>
<body>
<form>
Building<br /><div><input type="checkbox" onclick='markPercentages()' name="6" value="6"> Susilo 2A-13 (<span class='percentage'>0</span>%)</div><br />
<div><input type="checkbox" onclick='markPercentages()' name="7" value="7"> Susilo 2A-12 (<span class='percentage'>0</span>%)</div>
<br />Category<br /><select name="title"><option value="Wages">Wages</option><option value="Listrik">Listrik</option><option value="Iuran Bulanan">Iuran Bulanan</option></select><br />
On<br /><input type=text name=date id=date /><br />
Notes<br /><input type=text name=note /><br />
Value<br /><input type=text name=cost onChange="addDecimalPoints(this.id)" id=cost /><br />
<input type=submit value="Save" />
</form>
</body>
</html>
It shows a percentage right next to the building (Susilos) of the cost that it's adding. In simplest terms, if one is checked it shows 100%, if two are checked it shows 50% on the first and 50% on the second and so on.
It works fine in Chrome but in Firefox when I check just one, it shows 50% on that, like there are checked two. When I check two it shows 33% on those, like I checked three of them. Why this happen and how I should fix this?
Anyway , deleting a part of the code that's beyond that code makes that works also:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The management panel</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.min.js'></script>
<script type="text/javascript">
function markPercentages(){
var checked = $(':checked');
var percentage = Math.round((1 / checked.length) * 100);
checked.siblings('.percentage').html(percentage);
$('input[type=checkbox]').not(checked).siblings('.percentage').html('0');
}
</script>
</head>
<body>
<form>
Building<br /><div><input type="checkbox" onclick='markPercentages()' name="6" value="6"> Susilo 2A-13 (<span class='percentage'>0</span>%)</div><br />
<div><input type="checkbox" onclick='markPercentages()' name="7" value="7"> Susilo 2A-12 (<span class='percentage'>0</span>%)</div>
</form>
</body>
</html>
Thanks
http://jsfiddle.net/sjRAu/ - working all browsers
HTML:
<div>
<input type='checkbox' />Susilo 2A-13 (<span class='percentage'>0</span>%)
</div>
<div>
<input type='checkbox' />Susilo 2A-14 (<span class='percentage'>0</span>%)
</div>
<div>
<input type='checkbox' />Susilo 2A-15 (<span class='percentage'>0</span>%)
</div>
JS:
$(document).ready(function() {
$('input').click(function(){
markPercentages();
});
function markPercentages(){
var checked = $(':checked');
var percentage = Math.round((1 / checked.length) * 100);
checked.siblings('.percentage').html(percentage);
$('input[type=checkbox]').not(checked).siblings('.percentage').html('0');
}
});
If you have more inputs on the page just give your checkboxes a class like 'markbox' and change 'input' to '.markbox' in your JS
what about use like this one
$(function(){
$('input[type=checkbox').click(function(){
var checked = $('input[type=checkbox]').attr('checked');
var percentage = Math.round((1 / checked.length) * 100);
checked.siblings('.percentage').html(percentage);
$('input[type=checkbox]').not(checked).siblings('.percentage').html('0');
});
});
Try this code. I basically rewrote all of your logic:
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
$(':checkbox').change(function() {
var num_checked = $(':checkbox:checked').length;
if (num_checked == 0) {
$(':checkbox').each(function() {
$(this).siblings('.percentage:eq(0)').text('0');
});
return;
}
var percentage = Math.round(100 / num_checked);
$(':checkbox').each(function() {
if ($(this).is(':checked')) {
$(this).siblings('.percentage:eq(0)').text(percentage);
} else {
$(this).siblings('.percentage:eq(0)').text('0');
}
});
});
});
</script>
</head>
<body>
<div>
<input type='checkbox'/>Susilo 2A-13 (<span class='percentage'>0</span>%)
</div>
<div>
<input type='checkbox' />Susilo 2A-14 (<span class='percentage'>0</span>%)
</div>
<div>
<input type='checkbox' />Susilo 2A-15 (<span class='percentage'>0</span>%)
</div>
</body>
</html>
Demo: http://jsfiddle.net/NKuHS/3/