I was trying to test my code...but I can't get any Javascript function to be called. I've tried a lot of things: Making buttons to call my existing function, trying to call new functions in with this code, inserting my function into previously successful HTML files. None of these strategies have worked. Whatever I do, any Javascript function in this file will not be called, or appears to not be called. I have no idea why.
<!DOCTYPE html>
<html>
<head>
<title>Template Page</title>
</head>
<body onLoad="chooser()">
<!--HTML "route" for images-->
<img src="IMG_0000.jpg"></img>
<img src="IMG_0001.jpg"></img>
<img src="IMG_0002.jpg"></img>
<img src="IMG_0003.jpg"></img>
<img src="IMG_0004.jpg"></img>
<script type="text/javascript">
//Create a list of images, choose randomly for that list (to display on the page), and then delete that image from the list
function chooser()
{
//Declare variables
var start = 0;
var end = 9;
var images = [];
var imageNumber = start;
var imageName = "";
//Add image src's to array
while (imageNumber <= end)
{
if (imageNumber < 10)
{
imageName = "IMG_000" + string(imageNumber) + ".jpg";
}
else if (imageNumber > 9) && (imageNumber < 100)
{
imageName = "IMG_00" + string(imageNumber) + ".jpg";
}
else if (imageNumber > 99) && (imageNumber < 1000)
{
imageName = "IMG_0" + string(imageNumber) + ".jpg";
}
else if (imageNumber > 999) && (imageNumber < 10000)
{
imageName = "IMG_" + string(imageNumber) + ".jpg";
}
images.push(imageName);
imageNumber = imageNumber + 1;
alert(images);
}
}
</script>
</body>
</html>
You have syntax error in your else-if parts, here's the correct one:
if (imageNumber < 10)
{
imageName = "IMG_000" + string(imageNumber) + ".jpg";
}
else if ((imageNumber > 9) && (imageNumber < 100))
{
imageName = "IMG_00" + string(imageNumber) + ".jpg";
}
else if ((imageNumber > 99) && (imageNumber < 1000))
{
imageName = "IMG_0" + string(imageNumber) + ".jpg";
}
else if ((imageNumber > 999) && (imageNumber < 10000))
{
imageName = "IMG_" + string(imageNumber) + ".jpg";
}
and also that function-like string(), what do you want with them? Convert imageNumber from integer to string? In that case, you don't need anything. "+" operator will automatically convert the numbers to string. So remove those string() making your final code to:
if (imageNumber < 10)
{
imageName = "IMG_000" + imageNumber + ".jpg";
}
else if ((imageNumber > 9) && (imageNumber < 100))
{
imageName = "IMG_00" + imageNumber + ".jpg";
}
else if ((imageNumber > 99) && (imageNumber < 1000))
{
imageName = "IMG_0" + imageNumber + ".jpg";
}
else if ((imageNumber > 999) && (imageNumber < 10000))
{
imageName = "IMG_" + imageNumber + ".jpg";
}
Related
I implemented a following HTML <input> multiple Attribute
<input type="file" name="R" id="someattachId" multiple="multiple" style='display:none' />
I'm trying to remove specific item in it using following code
$('#someattachId')[0].files[fileId].remove();
but it can't remove it.
No, We can make it removable.
I implemented this and it works definitely.
First you need to initialize this variables
var newImageObj = [];
var ImageNo = 0;
Then write this code on file input's change
$("#exampleInputFileProduct").change(function () {
var fileUpload = document.getElementById("exampleInputFileProduct");
//$("#mainImages").html('');
//$("#subImages").html('');
if (typeof (FileReader) != "undefined") {
//Here Check File Extension
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png)$/;
for (var i = 0; i < fileUpload.files.length; i++) {
var j = 0;
var file = fileUpload.files[i];
var NewFile = fileUpload.files[i];
//Here Check File Size 1MB = 1000000 Bytes
if (file.size < 2048000) {
if (regex.test(file.name.toLowerCase())) {
var reader = new FileReader();
reader.onload = function (e) {
if ($("#mainImages").find(".item").attr("id") == "FirstSlider") {
$("#mainImages").html('');
$("#subImages").html('');
$("#subImages").append("<div class='item active'></div>");
}
if ($("#mainImages").find(".item").hasClass("active")) {
$("#mainImages").append("<div class='item " + ImageNo + "_CClass\'><i class='fa fa-times customIcon' onclick='RemoveImage(\"" + ImageNo + "_CClass\",\"" + fileUpload.files[j].name.toLowerCase() + "\")'></i><img class='CImage' src='" + e.target.result + "' alt='' /></div>");
} else {
$("#mainImages").append("<div class='item active " + ImageNo + "_CClass'><i class='fa fa-times customIcon' onclick='RemoveImage(\"" + ImageNo + "_CClass\",\"" + fileUpload.files[j].name.toLowerCase() + "\")'></i><img class='CImage' src='" + e.target.result + "' alt='' /></div>");
}
//if ($("#subImages").find(".item").length == 0) {
// $("#subImages").append("<div class='item active'></div>");
//} else {
if (($("#subImages").find(".item").find("div").length / 5) >= $("#subImages").find(".item").length) {
$("#subImages").append("<div class='item'></div>");
}
//}
var append = 0;
$.each($("#subImages").find(".item"), function (p, pelement) {
if (append == 0) {
if ($(pelement).find("div").length != 5) {
var newID = $(pelement).find("div").length;
newID = newID;
$(pelement).append("<div onclick='LoadImage(\"" + ImageNo + "_CClass\")' data-slide-to='" + newID + "' class='thumb " + ImageNo + "_CClass'> <img src='" + e.target.result + "' alt=''></div>");
append = append + 1;
}
}
})
j = j + 1;
ImageNo = ImageNo + 1;
}
newImageObj.push(file);
reader.readAsDataURL(file);
}
}
}
} else {
alert("This browser does not support HTML5 FileReader.");
}
});
Then at last this 2 functions will help to do the rest
function LoadImage(objclass) {
$("#mainImages").find(".item").removeClass("active");
$("#mainImages").find("." + objclass + "").addClass("active");
}
function RemoveImage(objclass, ImageName) {
$.each(newImageObj, function (e, element) {
if ($(this)[0].name.toLowerCase().trim() == ImageName.trim()) {
newImageObj.pop(this);
}
});
$("#mainImages").find("." + objclass + "").remove();
$("#subImages").find(".item").find("." + objclass + "").remove();
if ($("#mainImages").find(".item").length == 0) {
$("#mainImages").append("<div class='item active'><i class='fa fa-times customIcon'></i><img class='CImage' src='/Content/img/DefaultProduct.gif' alt='' /></div>");
$("#subImages").append("<div class='item active'><div data-target='#carousel' data-slide-to='0' class='thumb'> <img src='/Content/img/DefaultProduct.gif' alt=''></div></div></div>");
} else {
$("#mainImages").find(".item").removeClass("active");
$("#mainImages").find(".item:first-child").addClass("active");
$("#subImages").find(".item").removeClass("active");
$("#subImages").find(".item:first-child").addClass("active");
}
}
At last when you submit your form than take the files from the array
I am trying to use dynamically created IDs in javascript function, but it's not working. I thought that prepending # to string id should work, but it's not.
Code:
var IterateCheckedDatesAndUncheckWithSameValue = function (elementNumber) {
idCheckBoxToCompare = "CMP_KD1_tcDE_tctpDNDR_chkDNDRDay" + elementNumber.toString();
if ($("'#" + idCheckBoxToCompare + "'").prop('checked') === false) {
return;
}
textBoxID = "CMP_KD1_tcDE_tctpDNDR_txtDNDRDay" + elementNumber.toString();
textBoxValue = $("'#" + textBoxID + "'").val();
for (i = 1; i < 8; i++) {
if (i !== elementNumber) {
idCheckBox = "CMP_KD1_tcDE_tctpDNDR_chkDNDRDay" + i.toString();
idInputBox = "CMP_KD1_tcDE_tctpDNDR_txtDNDRDay" + i.toString();
inputBoxValue = $("'#" + idInputBox + "'").val();
if ($("'#" + idCheckBox + "'").prop('checked') === true) {
if (inputBoxValue === textBoxValue) {
$("'#" + idCheckBox + "'").prop('checked', false);
}
}
}
}
}
I've tried to build same id as this is:
'#testid'
so usage would be:
$('#testid')
But it's not working. How to use properly dynamically created IDs?
Your code is look complicated with too many " and '. Also Javascript can concat string and number by just use +. No need to convert it to string first. So, I updated it to make it more readable.
Try this
var IterateCheckedDatesAndUncheckWithSameValue = function(elementNumber) {
idCheckBoxToCompare = "CMP_KD1_tcDE_tctpDNDR_chkDNDRDay" + elementNumber;
if ($('#' + idCheckBoxToCompare).prop('checked') === false) {
return;
}
textBoxID = "CMP_KD1_tcDE_tctpDNDR_txtDNDRDay" + elementNumber;
textBoxValue = $('#' + textBoxID).val();
for (i = 1; i < 8; i++) {
if (i !== elementNumber) {
idCheckBox = "CMP_KD1_tcDE_tctpDNDR_chkDNDRDay" + i;
idInputBox = "CMP_KD1_tcDE_tctpDNDR_txtDNDRDay" + i;
inputBoxValue = $('#' + idInputBox).val();
if ($('#' + idCheckBox).prop('checked') === true) {
if (inputBoxValue === textBoxValue) {
$('#' + idCheckBox).prop('checked', false);
}
}
console.log('#' + idCheckBox); //print here just to see the id results
}
}
}
ID in html can be only one element per page. So please make sure that the ID you generate from this method not match with other.
Jquery selector can read String variable.
So you can just do var id = "#test". Then put it like this $(id).
Or
var id = "test"; then $("#"+test).
Use this,
var IterateCheckedDatesAndUncheckWithSameValue = function (elementNumber) {
idCheckBoxToCompare = "CMP_KD1_tcDE_tctpDNDR_chkDNDRDay" + elementNumber.toString();
if ($("#" + idCheckBoxToCompare).prop('checked') === false) {
return;
}
textBoxID = "CMP_KD1_tcDE_tctpDNDR_txtDNDRDay" + elementNumber.toString();
textBoxValue = $("#" + textBoxID).val();
for (i = 1; i < 8; i++) {
if (i !== elementNumber) {
idCheckBox = "CMP_KD1_tcDE_tctpDNDR_chkDNDRDay" + i.toString();
idInputBox = "CMP_KD1_tcDE_tctpDNDR_txtDNDRDay" + i.toString();
inputBoxValue = $("#" + idInputBox).val();
if ($("#" + idCheckBox).prop('checked') === true) {
if (inputBoxValue === textBoxValue) {
$("#" + idCheckBox).prop('checked', false);
}
}
}
}
}
I face the same problem using Jquery .Try $(document).getElementbyId('myid'). Hope help.
Edit
Change :
$("#" + idCheckBoxToCompare) by $(document).getElementbyId(idCheckBoxToCompare)
I'n new to programming and I tried something in JavaScript and it worked well in Chrome. But It fails to work in IE, Firefox, Safari and Opera. Am I doing anything wrong with my code?
function hp(form) {
var count1 = 0, count2 = 0, count3 = 0, count4 = 0, count5 = 0, count6 = 0, count7 = 0, count8 = 0, count9 = 0, count10 = 0;
for (var i = 0; i < 3; i++) {
if (form.q1[i].checked == true) {
count1++;
}
}
if (count1 !== 1) {
alert("Please Answer 1st Question");
return false;
}
for (var i = 0; i < 3; i++) {
if (form.q2[i].checked == true) {
count2++;
}
}
if (count2 !== 1) {
alert("Please Answer 2nd Question");
return false;
}
for (var i = 0; i < 3; i++) {
if (form.q3[i].checked == true) {
count3++;
}
}
if (count3 !== 1) {
alert("Please Answer 3rd Question");
return false;
}
for (var i = 0; i < 3; i++) {
if (form.q4[i].checked == true) {
count4++;
}
}
if (count4 !== 1) {
alert("Please Answer 4th Question");
return false;
}
for (var i = 0; i < 3; i++) {
if (form.q5[i].checked == true) {
count5++;
}
}
if (count5 !== 1) {
alert("Please Answer 5th Question");
return false;
}
for (var i = 0; i < 3; i++) {
if (form.q6[i].checked == true) {
count6++;
}
}
if (count6 !== 1) {
alert("Please Answer 6th Question");
return false;
}
for (var i = 0; i < 3; i++) {
if (form.q7[i].checked == true) {
count7++;
}
}
if (count7 !== 1) {
alert("Please Answer 7th Question");
return false;
}
for (var i = 0; i < 3; i++) {
if (form.q8[i].checked == true) {
count8++;
}
}
if (count8 !== 1) {
alert("Please Answer 8th Question");
return false;
}
for (var i = 0; i < 4; i++) {
if (form.q9[i].checked == true) {
count9++;
}
}
if (count9 !== 1) {
alert("Please Answer 9th Question");
return false;
}
for (var i = 0; i < 3; i++) {
if (form.q10[i].checked == true) {
count10++;
}
}
if (count10 !== 1) {
alert("Please Answer 10th Question");
return false;
}
answer1 = (form.q1.value);
answer2 = (form.q2.value);
answer3 = (form.q3.value);
answer4 = (form.q4.value);
answer5 = (form.q5.value);
answer6 = (form.q6.value);
answer7 = (form.q7.value);
answer8 = (form.q8.value);
answer9 = (form.q9.value);
answer10 = (form.q10.value);
var a = parseInt(answer1);
var b = parseInt(answer2);
var c = parseInt(answer3);
var d = parseInt(answer4);
var e = parseInt(answer5);
var f = parseInt(answer6);
var g = parseInt(answer7);
var h = parseInt(answer8);
var ii = parseInt(answer9);
var j = parseInt(answer10);
var c = a + b + c + d + e + f + g + h + ii + j;
//document.getElementById("result").innerHTML= "The selected values are "+"</br>"+a+"</br>"+b+c+d+e+f+g+h+ii+j+"</br>"+c;
if (c <= 20) {
document.getElementById("total").innerHTML = "<h3>" + "ABCD" + "</h3>" + "</br>" + "<IMG ALIGN='center' " + "SRC='images/img.png'>";
}
else if ((c > 20) && (c <= 25)) {
document.getElementById("total").innerHTML = "<h3>" + "ABCD" + "</h3>" + "</br>" + "<IMG ALIGN='center' " + "SRC='images/img.png'>";
}
else if ((c > 25) && (c <= 30)) {
document.getElementById("total").innerHTML = "<h3>" + "ABCD" + "</h3>" + "</br>" + "<IMG ALIGN='center' " + "SRC='images/img.png'>";
}
else if ((c > 30) && (c <= 40)) {
document.getElementById("total").innerHTML = "<h3>" + "ABCD" + "</h3>" + "</br>" + "<IMG ALIGN='center' " + "SRC='images/img.png'>";
}
else if ((c > 40) && (c <= 50)) {
document.getElementById("total").innerHTML = "<h3>" + "ABCD" + "</h3>" + "</br>" + "<IMG ALIGN='center' " + "SRC='images/img.png'>";
}
else if ((c > 50) && (c <= 60)) {
document.getElementById("total").innerHTML = "<h3>" + "ABCD" + "</h3>" + "</br>" + "<IMG ALIGN='center' " + "SRC='images/img.png'>";
}
else if ((c > 60) && (c <= 65)) {
document.getElementById("total").innerHTML = "<h3>" + "ABCD" + "</h3>" + "</br>" + "<IMG ALIGN='center' " + "SRC='images/img.png'>";
}
else if ((c > 65) && (c <= 75)) {
document.getElementById("total").innerHTML = "<h3>" + "ABCD" + "</h3>" + "</br>" + "<IMG ALIGN='center' " + "SRC='images/img.png'>";
}
else if ((c > 75) && (c <= 90)) {
document.getElementById("total").innerHTML = "<h3>" + "ABCD" + "</h3>" + "</br>" + "<IMG ALIGN='center' " + "SRC='images/img.png'>";
}
c = 0;
}
I tried this code in local host and i got my desired output in Google Chrome. When i tried the same page in Firefox and other browser, it failed to work. Only checkbox validation is working fine.
Thanks in Advance
From personal experience, I have noticed that Chrome is more forgiving when it comes to small errors. It is strange how you are not getting an error in the debug box at all...
But, a place I can see from reading the code is where you define the variables a,b,c... I recommend placing a comma after each. So, you get:
var a = parseInt(answer1),
b = parseInt(answer2),
c = parseInt(answer3),
d = parseInt(answer4),
e = parseInt(answer5),
f = parseInt(answer6),
g = parseInt(answer7),
h = parseInt(answer8),
ii = parseInt(answer9),
j = parseInt(answer10);
Then here is where I think you have an error. You have var c = ... again after already defining c. So, try removing the var right there.
I have a game board 8x8. below is the code to create the board...
for (var i = 0 ; i < TOTAL_ROWS ; i++) {
tab_imgs[i] = [];
for (var j = 0 ; j < TOTAL_COLUMNS ; j++) {
var num_img = Math.ceil(Math.random() * NUM_IMGS);
if (i > 1) {
while(tab_imgs[i-2][j] == num_img && tab_imgs[i-1][j] == num_img){
num_img = Math.ceil(Math.random() * NUM_IMGS);
}
}
if (j > 1) {
while(tab_imgs[i][j-2] == num_img && tab_imgs[i][j-1] == num_img){
num_img = Math.ceil(Math.random() * NUM_IMGS);
if (i > 1) {
while(tab_imgs[i-2][j] == num_img && tab_imgs[i-1][j] == num_img){
num_img = Math.ceil(Math.random() * NUM_IMGS);
}
}
}
}
tab_imgs[i][j] = num_img;
render_table += '<div class="jewel jewel_' + num_img + '" data-row="' + i + '" data-col="' + j + '" data-jewel="' + num_img + '" style="top: ' + Number(i*TOTAL_IMGS) + 'px; left: ' + Number(j*TOTAL_IMGS) + 'px;"></div>';
}
}
The code above will produce a random board. My issue is when the user resumes an existing game. I need to loop through the ALREADY produced html and grab the attribute "data-jewel" so instead of these lines:
num_img = Math.ceil(Math.random() * NUM_IMGS);
I have:
num_img = attribute('data-jewel')
for each grid;
You can retrieve the value of a data attribute by using the jQuery .data() method:
num_img = +$('.selector').data( 'jewel' );
I know that this question has been asked multiple times, but my case is different. So I have an external JavaScript file which contains the code for my accordion menus (you know, the user clicks on a title and it expands). Now I want to get a # (hash sign) from the url and according to it to open a specific "accordion" onload.
So here's what I've tried:
<body onload="runAccordion(index);"> <!-- In the example bellow, index should be equal to 1 -->
But it never worked (as desired), because I don't know how to "read" the url's # (element's id)...
Here's the markup for an accordion:
<div id="AccordionContainer" class="AccordionContainer">
<div onclick="runAccordion(1);">
<div class="AccordionTitle" id="AccordionTitle1">
<p>Title</p>
</div>
</div>
<div id="Accordion1Content" class="AccordionContent">
<p>
<!-- Content -->
</p>
</div>
Or maybe I should use PHP $_GET???
JS file contents:
var ContentHeight = 200;
var TimeToSlide = 250.0;
var openAccordion = '';
function runAccordion(index) {
var nID = "Accordion" + index + "Content";
if (openAccordion == nID)
nID = '';
setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'" + openAccordion + "','" + nID + "')", 33);
openAccordion = nID;
}
function animate(lastTick, timeLeft, closingId, openingId) {
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;
var opening = (openingId == '') ? null : document.getElementById(openingId);
var closing = (closingId == '') ? null : document.getElementById(closingId);
if (timeLeft <= elapsedTicks) {
if (opening != null)
opening.style.height = ContentHeight + 'px';
if (closing != null) {
closing.style.display = 'none';
closing.style.height = '0px';
}
return;
}
timeLeft -= elapsedTicks;
var newClosedHeight = Math.round((timeLeft / TimeToSlide) * ContentHeight);
if (opening != null) {
if (opening.style.display != 'block')
opening.style.display = 'block';
opening.style.height = (ContentHeight - newClosedHeight) + 'px';
}
if (closing != null)
closing.style.height = newClosedHeight + 'px';
setTimeout("animate(" + curTick + "," + timeLeft + ",'" + closingId + "','" + openingId + "')", 33);
}
Give the following a try:
$(document).ready(function() {
var hash = window.location.hash;
hash = hash.length > 0 ? hash.substring(1);
if (hash.length) {
runAccordion(window.location.hash);
}
});
The above will grab your hash index out of the URL. To add a hash to the URL, try the following:
window.location.hash = 1; //or whatever your index is
# You can use: #
window.onload = function() {
runAccordion(window.location.hash);
}