Okay, I dont know why my codepen version and my real one act different, but they are. In my codepen both windows start off with all of them open. In my real version you only see 2 sets of 01-Postpone and 02-Approve, the way they should be. Here, in my code snippet, the first text box does not populate, but the values are logged in the console.
Okay, so now my problem. Clicking any 1 of these slides opens a box underneath it with 2 options. PROCEED and CANCEL. With my fun function, it gets the 3 variables perfectly when 1 of those options is clicked ( see them in my console).
When PROCEED is clicked, I need those 3 variables so that I can run an ajax post to an external file. How do I get the 3 fun variables into my proceed function? I thought with var, they would be global, but I have tried many possibilities without success to access them. I do not want to use cookies as I am sure this is possible without them.
I have another freaky issue, but that is for another day when I get this part to work. Any assistance would greatly be appreciated.
https://codepen.io/lepew/pen/agNBzo
// 00 - CANCEL
function cancel00() {
alert("Cancel");
}
// End CANCEL
// 02 - PROCEED
function proceed01() {
// Ajax will go here
alert("This works.");
}
// End of PROCEED
// 03 - Get the data-field variables
function fun(obj) {
var one = obj.dataset.self,
two = obj.dataset.record,
three = obj.dataset.selectedoption;
//
console.log(one, two, three);
//
}
//external file
$(document).ready(function() {
$(".dropdown-link").on("click", function() {
//
const tranSpeed = "slow";
//
//
// Get code variable and be able to access this value elsewhere.
var selectmycode = $(this).attr("data-selectedoption");
//
// Display the variable in CONSOLE.
console.log(selectmycode);
//
// Get clicked option.
var selOption = $(this).data("selectedoption");
//
// Out the value of selectedoption into text field thecode.
var thecoder = $(".thecode").attr("value", selOption);
//
//
//
// Get next "here".
var here = $(this).closest(".bind_Name").next(".here");
//
// Populate stuff.
$(here).find("legend").text(`Option ${selOption}`);
//
// TO DETECT IF DATA HAS CHANGED.
var dataChanged = $(here).data("seloption") !== selOption;
$(here).data("seloption", selOption);
console.log(dataChanged)
//
// Show the dropdown if data changed.
var target = $(here).find(".dropdown-container");
//
// This will close all other open options.
$(".dropdown-container").not(target).hide(tranSpeed);
//
if (dataChanged) {
$(target).show(tranSpeed);
} else {
// Or toggle it otherwise.
$(target).toggle(tranSpeed);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bind_Area">
<div class="bind_Name">
<div class="dropdown">
<div class="dropdown-link" onclick="fun(this);" data-selectedoption="01" data-record="123456820" data-self="123456830">01-Postpone
</div>
<!-- end of #dropdown-link -->
</div>
<!-- end of #dropdown -->
<div class="dropdown">
<div class="dropdown-link" onclick="fun(this);" data-selectedoption="02" data-record="123456820" data-self="123456830">02-Approve
</div>
<!-- end of #dropdown-link -->
</div>
<!-- end of #dropdown -->
</div>
<!-- end of #bind_Name -->
<div class="here">
<div class="dropdown-container">
<fieldset>
<legend></legend>
<input type="text" class="thecode" data-code="">
<input type="text" class="peter" data-user="123456820" value="123456820">
<input type="text" id="mary" data-product="123456830" value="123456830">
<div>PROCEED</div>
<div>CANCEL</div>
</fieldset>
</div>
<!-- end of #dropdown-container -->
</div>
<!-- end of #here -->
<div class="bind_Note"></div>
</div>
<!-- end of #bind_Area -->
<br>
<br>
<br>
<div class="bind_Area">
<div class="bind_Name">
<div class="dropdown">
<div class="dropdown-link" onclick="fun(this);" data-selectedoption="01" data-record="123456820" data-self="123456831">01-Postpone
</div>
<!-- end of #dropdown-link -->
</div>
<!-- end of #dropdown -->
<div class="dropdown">
<div class="dropdown-link" onclick="fun(this);" data-selectedoption="02" data-record="123456820" data-self="123456831">02-Approve
</div>
<!-- end of #dropdown-link -->
</div>
<!-- end of #dropdown -->
</div>
<!-- end of #bind_Name -->
<div class="here">
<div class="dropdown-container">
<fieldset>
<legend>
<div class="fubar"></div>
</legend>
<div>
<input type="text" class="thecode" data-code="">
<input type="text" class="peter" data-user="123456820" value="123456820">
<input type="text" id="mary" data-product="123456831" value="123456831">
</div>
<!-- end of #blank div -->
<div>PROCEED</div>
<div>CANCEL</div>
</fieldset>
</div>
<!-- end of #dropdown-container -->
</div>
<!-- end of #here -->
<div class="bind_Note">
</div>
</div>
<!-- end of #bind_Area -->
<br>
<br>
<br>
Related
I'm trying to scrape some files off of a website which has files organized like this:
<div id="CourseContent">
<div class="tab-content coursecontentnotes" id="content_210485ac8-16e8-11ed-9075-0a45a3083c9c">
<!-- Text Content -->
<!-- End Text Content -->
<!-- Video Content -->
<!-- Video Content End -->
<!-- File Content Start -->
<div class="content-type-area">
<div class="row">
<div class="col-md-12">
<div href="javascript:void(0)" class="link-preview" onclick="downloadcoursedoc('4d2d6bd0-077a-4bda-80be-cf7483c9f606')">
<span class="pesu-icon-unlink" aria-hidden="true"></span>
Web Form 2.0 & Form Controls
<span class="pesu-icon-arr-right pull-right" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
<!-- File Content End -->
<!-- Web Link Content End -->
<!-- Web Link Content End -->
<!-- Text Content -->
<!-- End Text Content -->
<!-- Video Content -->
<!-- Video Content End -->
<!-- File Content Start -->
<div class="content-type-area">
<div class="row">
<div class="col-md-12">
<div href="javascript:void(0)" class="link-preview" onclick="downloadcoursedoc('a7bdfc1e-d7cd-40ac-9b02-a688fc684e6e')">
<span class="pesu-icon-unlink" aria-hidden="true"></span>
HTML5 (New Tags, Inputs, Elements and Controls),
<span class="pesu-icon-arr-right pull-right" aria-hidden="true"></span>
</div>
</div>
</div>
</div>
<!-- File Content End -->
<!-- Web Link Content End -->
<!-- Web Link Content End -->
<!-- END of for loop -->
<!-- For Study Material -->
<!-- End of Study Material -->
<!-- For Forums -->
<!-- For Forums End -->
</div>
The code I used in puppeteer's page.evaluate function is as follows:
let downloadObj = document.querySelectorAll(
"#CourseContent .tab-content .content-type-area div"
);
// filter selected elements belonging to same content row
downloadObj = Array.from(downloadObj).filter((el) =>
el.querySelector(".col-md-12")
);
downloadObj.forEach((ele) => {
eval(ele.querySelector(".link-preview").getAttribute("onclick"));
});
The problem is, only only the second file is getting downloaded.
But if I manually do
eval(downloadObj[0].querySelector(".link-preview").getAttribute("onclick"));
the file downloads normally.
Does this have to do something with the click opening a new tab?
Thank you for your time.
Try this instead - it gives each click a second
const elements = [...document.querySelectorAll("#CourseContent .tab-content .content-type-area div .col-md-12")]
.map(ele => ele.querySelector(".link-preview");
const length = elements.length;
let cnt = 0;
let tId;
const clickIt = () => {
if (cnt >= length) return; // stop
elements[cnt].click();
cnt++
setTimeout(clickIt,1000);
});
clickIt();
i have a problem with my website. I have couple of functions in java script that works in <body> <script> js code </script></body> but when i link external js file with exactly the same code functions that are called by onclick"function name" attribute stop working and I get error can't find variable: function name also it seems like it can't find some of ids for variables because i can't log them. this is my code
function onload() {
/* leaderboard variable */
let x = document.getElementById('boardw');
/* help popup variable*/
let y = document.getElementById('helpw');
/* settings popup variable*/
let z = document.getElementById('setw');
/* help button variable*/
let a = document.getElementById('help');
/* dropdown container variable*/
let dropdown = document.getElementById('dropdown');
/* footer popup display none*/
document.getElementById('card').style = "display: none;";
/* variable test */
console.log(x);
/* show footer popup */
function showCard() {
document.getElementById('card').style = "display: block;";
document.getElementById('footer').style = "display: none;";
}
/* hide footer popup */
function hide() {
document.getElementById('card').style = "display: none;";
document.getElementById('footer').style = "display: block;";
}
/* choose time in dropdown function */
function show(anything) {
document.getElementById('txt').value = anything;
}
/* show options in dropdown */
dropdown.onclick = function() {
dropdown.classList.toggle('active');
}
/* show leaderboard function*/
function menu1() {
x.classList.toggle('active');
}
/* show help popup function*/
function menu2() {
y.classList.toggle('active');
a.classList.toggle('active');
}
/* show settings function*/
function menu3() {
z.classList.toggle('active');
}
/* hide popups function*/
function remove() {
y.classList.remove('active');
z.classList.remove('active');
x.classList.remove('active');
dropdown.classList.remove('active');
}
}
<body id="bd" style="" onload="onload()">
<script src="script.js" charset="utf-8"></script>
<!-- dropdown select time window -->
<div class="dropdown" id="dropdown" onclick="">
<!-- dropdown textbox with chosen informations -->
<input type="text" class="textbox" id="txt" value="" placeholder=" select the test duration" readonly>
<!-- options for dropdown select -->
<div class="option">
<div onclick="show(' 1 minute')">1 minute</div>
<div onclick="show(' 2 minutes')">2 minutes</div>
<div onclick="show(' 3 minutes')">3 minutes</div>
<div onclick="show(' 5 minutes')">5 minutes</div>
<div onclick="show(' 10 minutes')">10 minutes</div>
</div>
</div>
<!-- checkboxes for charset in game -->
<div id="charset">
<!-- normal letters check -->
<div>
<label for="cka">a</label>
<input type="checkbox" id="cka" class="ck">
</div>
<!-- capital letters check -->
<div>
<label for="ckB">A</label>
<input type="checkbox" id="ckB" class="ck">
</div>
<!-- numbers check -->
<div>
<label for="ck1">1</label>
<input type="checkbox" id="ck1" class="ck">
</div>
<!-- special characters check -->
<div>
<label for="ck>">#</label>
<input type="checkbox" id="ck" class="ck">
</div>
</div>
<!-- about popup -->
<footer onclick="remove()">
<!-- show popup btn -->
<button id="footer" onclick="showCard();" style="">i</button>
<!-- popup container -->
<div id="card" class="card" style="">
<!-- close popup btn -->
<button id="close" onclick="hide()">x</button>
</div>
</footer>
<!-- menu -->
<menu>
<!-- leaderboard popup -->
<button class="menu" id="board" onclick="menu1()">L</button>
<div id="boardw" style="" class="menuw">
</div>
<!-- help popup -->
<button class="menu" id="help" onclick="menu2()">?</button>
<div id="helpw" style="" class="menuw">
</div>
<!-- settings pop -->
<button class="menu" id="settings" onclick="menu3()">S</button>
<div id="setw" style="" class="menuw">
</div>
</menu>
<!-- start game btn -->
<div id="gma">
<button id="start">Start</button>
</div>
<!-- frame for higher resolution screen-->
<div class="h"> </div>
</body>
You wrapped your functions in function onload() { ... } so the inner functions can't be reached from HTML.
Remove this wrapper.
Add defer attribute to the script
put functions and variables outside the onload function,
or use addEventListener to call listener
document.getElementById("cka").addEventListener("click", function(){
...
})
I am a very new coder trying to build my first app. I have created a login page but something seems to be blocking it. I am not sure why it is not working, could it be a small error or something else? My sign-up page works fine but the login does not even click through. Can anyone help find what might be the error in my code?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<!-- CSP, above, is used to set what resources the app can access -->
<script src="components/loader.js"></script>
<!-- Required Monaca stuff above, do not edit -->
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="css/mycolors.min.css">
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<!-- START Welcome screen -->
<section data-role="page" data-theme="c" id="pgWelcome">
<!-- Main content in the middle of the screen -->
<article role="main" class="ui-content">
<h2>CBDB -- Comic Book Database</h2>
<p><img src="images/usg-14.png" alt="usg-14" class="imgMain"></p>
<p>Collect, store, save, and share your comics in one place. Learn all about the great world of comics.</p>
<p>Need an account? Create an account</p>
<p>Have an account?Log In</p>
</article>
<!-- JS content at the bottom of the screen -->
</section>
<!-- END Welcome screen -->
<!-- START SignUp screen-->
<section data-role="page" data-theme="c" id="pgSignUp">
<header data-role="header" data-add-back-btn="true">
<h1>Sign Up</h1>
</header>
<article role="main" class="ui-content">
<!-- A <form> element to ask for credentials for creating an account 1:09-->
<form id="fmSignUp">
<label for="inEmailSignUp">Email:</label>
<input name="inEmailSignUp" type="email" placeholder="loislane#dailyplanet.com" required id="inEmailSignUp">
<label for="inPasswordSignUp">Password:</label>
<input name="inPasswordSignUp" type="password" placeholder="girlreporter222" required id="inPasswordSignUp">
<label for="inPasswordConfirmSignUp">Confirm Password:</label>
<input name="inPasswordConfirmSignUp" type="password" placeholder="girlreporter222" required id="inPasswordConfirmSignUp">
<!-- Grid with two columns, get code from jQueryMobile -->
<fieldset class="ui-grid-a">
<div class="ui-block-a"><input type="reset" value="Clear"></div>
<div class="ui-block-b"><input type="submit" value="Go"></div>
</fieldset>
</form>
</article>
</section>
<!-- END SignUp screen-->
<!-- START LogIn screen -->
<section data-role="page" data-theme="d" id="pgLogIn">
<header data-role="header" data-transition="flip" data-add-back-btn="true">
<h1>Log In!</h1>
</header>
<article role="main" class="ui-content">
<form id="fmLogIn">
<label for="inEmailLogIn">Email:</label>
<input name="inEmailLogIn" type="email" placeholder="loislane#dailyplanet.com" required id="inEmailLogIn">
<label for="inPasswordLogIn">Password:</label>
<input name="inPasswordLogIn" type="password" placeholder="girlreporter222" required id="inPasswordLogIn">
<!-- Grid with two columns in a form. Note FIELDSET -- which is used in a form (if it's not in a form, use DIV) -->
<fieldset class="ui-grid-a">
<div class="ui-block-a"><input type="reset" data-icon="delete" value="Clear"></div>
<div class="ui-block-b"><input type="submit" data-icon="forward" value="Go"></div>
</fieldset>
</form>
<!-- Go to Home -->
</article>
</section>
<!-- END Login screen-->
<!-- START Home screen-->
<section data-role="page" data-theme="c" id="pgHome">
<header data-role="header">
<h1>CBDB</h1>
Options
<nav data-role="navbar">
<ul>
<li>Home</li>
<li>Save</li>
<li>View</li>
</ul>
</nav>
</header>
<article role="main" class="ui-content">
<h2>Home</h2>
<img src="images/promotiger1.png" alt="promotiger1" class="imgHome">
<h4>The fun way to find your comics all in one place! Join the fun in collecting and sharing comics. Invite your friends!</h4>
Go to Welcome
</article>
<footer data-role="footer" data-position="fixed">
<h4>Copyright 2021 -- Monica Showalter Productions</h4>
</footer>
</section>
<!-- END Home screen -->
<!-- START Save screen -->
<section data-role="page" data-theme="d" id="pgSave">
<header data-role="header">
<h1>Save your Comic</h1>
Options
<nav data-role="navbar">
<ul>
<li>Home</li>
<li>Save</li>
<li>View</li>
</ul>
</nav>
</header>
<article role="main" class="ui-content">
<!-- <form> to save inventory to database -->
<form id="fmSaveComic">
<!-- Set up optional and required data to save -->
<fieldset>
<legend>Required</legend>
<label for="inTitleSave">Title: </label>
<input name="inTitleSave" type="text" required placeholder="Kimba the White Lion" id="inTitleSave">
<label for="inNumberSave">Number: </label>
<input name="inNumberSave" type="number" required placeholder="15" id="inNumberSave">
<label for="inYearSave">Year: </label>
<input name="inYearSave" type="number" required placeholder="1969" id="inYearSave">
</fieldset>
<fieldset>
<legend>Optional</legend>
<label for="inPublisherSave">Publisher: </label>
<input name="inPublisherSave" type="text" placeholder="Mushi Production" id="inPublisherSave">
<label for="inNotesSave">Notes: </label>
<textarea name="inNotesSave" placeholder="First published in Japan" id="inNotesSave"></textarea>
</fieldset>
<fieldset class="ui-grid-a">
<div class="ui-block-a"><input type="reset" data-icon="delete" value="Cancel"></div>
<div class="ui-block-b"><input type="submit" data-icon="forward" value="Save"></div>
</fieldset>
<!--Three column grid with setup button is below, I used 'submit' input type to keep it consistent with other buttons. This was from the assignment l
(buttons for setup, cancel and save), but the lecture suggested a more classic two-column style on 'save' page was expected so perhaps 'set-up' meant
worked fine in this form below and looked good, but I went with the class demo in code above. However, I include in this submission that I learned ho
columns, too -->
<!-- <fieldset class="ui-grid-b">
<div class="ui-block-a"><input type="submit" data-icon="check" value="Set Up"></div>
<div class="ui-block-b"><input type="reset" data-icon="delete" value="Cancel"></div>
<div class="ui-block-c"><input type="submit" data-icon="forward" value="Save"></div>
</fieldset> -->
</form>
Go to View
</article>
<footer data-role="footer" data-position="fixed">
<h4>Copyright 2021 -- Monica Showalter Productions</h4>
</footer>
</section>
<!-- End SAVE screen -->
<!-- Start VIEW screen -->
<section data-role="page" data-theme="d" id="pgView">
<header data-role="header">
<h1>View Your Comic</h1>
Options
<nav data-role="navbar">
<ul>
<li>Home</li>
<li>Save</li>
<li>View</li>
</ul>
</nav>
</header>
<article role="main" class="ui-content">
<h2>Take a look at your comic in living color!</h2>
<a href="#pgHome" data-role="button" data-transition="pop" data-icon="home" >View</a>
</article>
<footer data-role="footer" data-position="fixed">
<h4>Copyright 2021 -- Monica Showalter Productions</h4>
</footer>
</section>
<!-- End VIEW screen -->
<!-- Start OPTIONS screen -->
<section data-role="page" data-dialog="true" data-theme="c" id="pgOptions">
<header data-role="header">
<h1>Options</h1>
</header>
<article role="main" class="ui-content">
<p>A mobile app for comic book storage created by Monica Showalter in 2021. Copyright Monica Showalter Productions.</p>
<!-- Current button is a simple button but will be JavaScript eventually. Add an ID for that-->
<p>Log Out</p>
Contact Us | Reset Account
</article>
</section>
<!-- End OPTIONS screen -->
<!-- JavaScript should be before </body -->
<!-- Links to the online JS files-->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="js/javascript.js"></script>
</body>
</html>
Javascript page:
// Before any of our JavaScript can function, it should be in a "device ready" function
// that Cordova detected all foundational elements have been loaded
// Listen for the moment all your files load into memory
// Then run the main function "onDeviceReady ()"
document.addEventListener("deviceready", onDeviceReady, false);
// All future JS code must be on the onDeviceReady main function
function onDeviceReady() {
console.log("Cordova is ready!");
// ---- Variables ----
// These are containers for data
// Create variables for SignUp/LogIn forms, LogOut button
// var classic way, works
// let newer way, recommended for creating Object that varies
// const newer way, recommended for creating Object that does not vary
// document.getElementByID("fmSignUp") -- means find an HTML element with that ID, pJS or plain JS way
// $("#fmSignUp") --- means same thing as above, jQuery way
const $elFmSignUp = $("#fmSignUp"), // el means 'element' of HTML. Also, use $ for const name to remind it's in jquery, as seen
$elFmLogIn = $("#fmLogIn"), // This section tells JS where to find the form so it can interact
$elBtnLogOut = $("#btnLogOut");
// ---- Functions ----
// These are the subroutines (bundles of code) that accomplish a task
// Create a function to do all the steps signing up for an account
function fnSignUp(event) {
// prevent default event of refresh
event.preventDefault();
console.log("fnSignUp(event) is running!");
let $elInEmailSignUp = $("#inEmailSignUp"),
$elInPasswordSignUp = $("#inPasswordSignUp"),
$elInPasswordConfirmSignUp = $("#inPasswordConfirmSignUp");
// Quick test to read what's in box
console.log($elInEmailSignUp.val(), $elInPasswordSignUp.val(), $elInPasswordConfirmSignUp.val());
//next slide's code goes here because we will nest objects in the function
//this is to confirm passwords match
if($elInPasswordSignUp.val() != $elInPasswordConfirmSignUp.val()) {
console.log("Passwords do not match!");
window.alert("Passwords do not match!");
//$elInPasswordSignUp.val(""); /* blanking these two lines out as don't match instructor code */
//$elInPasswordConfirmSignUp.val("");
} else {
console.log ("Passwords DO match!");
// next slide's code goes here
// Now using local storage to save User data as new account:
let $tmpValInEmailSignUp = $elInEmailSignUp.val().toUpperCase(),
$tmpValInPasswordSignUp = $elInPasswordSignUp.val();
if(localStorage.getItem($tmpValInEmailSignUp) === null) {
console.log("New User detected!");
// Now we store the new User
localStorage.setItem($tmpValInEmailSignUp, $tmpValInPasswordSignUp);
// Clear for the next User
$elFmSignUp[0].reset();
// Welcome the new User
window.alert("Welcome!");
console.log("New User saved" + $tmpValInEmailSignUp);
} else {
window.alert("You already have an account!");
} // END If..Else for new/old user check
} // END If..Else for Password matching
} // END fnSignUp(event)
function fnLogIn() {
event.preventDefault();
console.log("fnLogIn() is running!"); // adjusted this to match instructor code, had word 'event' in the function ()
let $elInEmailLogIn = $("#inEmailLogIn"),
$elInPasswordLogIn = $("#inPasswordLogIn"),
$tmpValInEmailLogIn = $elInEmailLogIn.val().toUpperCase(), // added function parens toUpperCase to match instructor code
$tmpValInPasswordLogIn = $elInPasswordLogIn.val();
console.log($tmpValInEmailLogIn, $tmpValInPasswordLogIn);
// Conditional statement to see if account was previously created
if (localStorage.getItem($tmpValInEmailLogIn) === null) {
console.log("Account does not exist.");
window.alert("Account does not exist!");
} else {
console.log("Account does exist.");
if ($tmpValInPasswordLogIn === localStorage.getItem($tmpValInEmailLogIn)) {
console.log("Passwords DO match!");
$(":mobile-pagecontainer").pagecontainer("change", "#pgHome");
} else {
console.log("Passwords do not match.");
window.alert("WRONG password!");
} // END If..Else checking for password match *** CHECK THIS AGAIN, ADDED MYSELF
} // END If..Else checking for user account existence
} // END fnLogIn()
// Function to log out the User
function fnLogOut() {
console.log("fnLogOut() is running");
//Conditional Statement to confirm whether they really intend to log out
switch(window.confirm("Do you want to log out?")) {
case true:
console.log("User does want to log out");
// Move them to #pgWelcome
$(":mobile-pagecontainer").pagecontainer("change", "#pgWelcome");
// Now clear the <form> for a new User
$elFmSignUp[0].reset();
$elFmLogIn[0].reset();
break;
case false:
console.log("User does not want to log out");
break;
case "Maybe":
console.log("User might want to log out");
break;
default:
console.log("Unknown");
break;
} // END switch() to log out
} // END FnLogOut()
// ---- Event Listeners ----
// These are detecting interaction
// Wait for "submit" button in the FmSignUp <form>
// Then run a function called fnSignUp(), capture the default event, pass it through
$elFmSignUp.submit(function(){ fnSignUp(event); });
$elFmLogIn.submit(function(){ fnLogIn(); });
$elBtnLogOut.on("click", fnLogOut);
} // End onDeviceReady()
In my mind ,the question is occur because of the spell of line 30:
<p>Have an account?Log In</p>
and the reference line 61:
<section data-role="page" data-theme="d" id="pgLogIn">
as you can see, the pgLogin not equals with pgLogIn, change them to equals will resolve the question
Check your login function, in the javascript it doesn't have event while in the signup it has an event in it's argument. This may help.
In the following code I am trying to set the cat names in a way that doesn't hardcode them to the html. Because of that I am using an array. however whenever I try to set the innerHTML properties to catNames[0] or catNames[1] I get an error. I don't know why it doesn't evaluate that array and find the string and put that on the page.
HTML
<html>
<head>
<title>Cat Clicker</title>
</head>
<body>
<div>
<!-- name -->
<h1 id="creatname1">y</h1>
<!-- clickable image -->
<img id="cat" src="img/cat.jpg">
<!-- text -->
<p> You have clicked
<strong id="counter1">0</strong> times
</p>
</div>
<div>
<!-- name -->
<h1 id="createname2">x</h1>
<!-- clickable image -->
<img id="cat2" src="img/cat2.jpg">
<!-- text -->
<p> You have clicked <strong id="counter2">0</strong> times</p>
</div>
<script src="js/app.js"></script>
</body>
Javascript
(function(){
var image = document.getElementById('cat'), image2=
document.getElementById('cat2'),
clicks1= document.getElementById('counter1'),clicks2=
document.getElementById('counter2'),
counterNumber1=0, counterNumber2=0, catNames=["Javi","Esteban"], name1=
document.getElementById('createname1'), name2=
document.getElementById('createname2');
name1.innerHTML= catNames[0];
name2.innerHTML= catNames[1];
function imageClickHandler() {
counterNumber1++;
clicks1.innerHTML= counterNumber1;
}
function imageClickHandler2() {
counterNumber2++;
clicks2.innerHTML= counterNumber2;
}
image.addEventListener('click',imageClickHandler,false);
image2.addEventListener('click',imageClickHandler2,false);
})();
I have changed a bit your code (actually, I intended the lines and make single variable declarations to be more readable.
The error was in the id you were using. Specifically, in your HTML code you define the id creatname1 and you try to select the element with id createname1.
(function(){
var image = document.getElementById('cat');
var image2 = document.getElementById('cat2');
var clicks1 = document.getElementById('counter1');
var clicks2 = document.getElementById('counter2');
var counterNumber1=0;
var counterNumber2=0;
var catNames=["Javi","Esteban"];
var name1 = document.getElementById('createname1');
var name2 = document.getElementById('createname2');
name1.innerHTML= catNames[0];
name2.innerHTML= catNames[1];
function imageClickHandler() {
counterNumber1++;
clicks1.innerHTML= counterNumber1;
}
function imageClickHandler2() {
counterNumber2++;
clicks2.innerHTML= counterNumber2;
}
image.addEventListener('click',imageClickHandler,false);
image2.addEventListener('click',imageClickHandler2,false);
})();
<div>
<!-- name -->
<h1 id="createname1">y</h1>
<!-- clickable image -->
<img id="cat" src="img/cat.jpg">
<!-- text -->
<p> You have clicked
<strong id="counter1">0</strong> times
</p>
</div>
<div>
<!-- name -->
<h1 id="createname2">x</h1>
<!-- clickable image -->
<img id="cat2" src="img/cat2.jpg">
<!-- text -->
<p> You have clicked <strong id="counter2">0</strong> times</p>
</div>
I have few comments in my code, like this:
<!-- DebugDataTemplateBegin {"template":"one"} -->
<div class="row notices" id="admin">
comment One content
</div>
<!-- DebugDataTemplateEnd {"template":"one"} -->
<!-- DebugDataTemplateBegin {"template":"two"} -->
<div class="row notices" id="admin">
comment Two content
</div>
<!-- DebugDataTemplateEnd {"template":"two"} -->
and I have anchors like this:
one <br/>
two
These links content corresponds to the comments 'template' element, what I want to achieve is that when the user hover over any of these links it's correspondence content (between the comment) will be highlighted.
I started a simple jsfiddle example http://jsfiddle.net/Banzay/md79aaby/ , but not sure if this is even possible.
Sorry if I didn't explain this very well.
Youssef
Cleaned up my answer above and removed it.
You might have to change the parent you are looking for comments in. And the regex could use some love but this is the general idea.
HTML:
<!-- DebugDataTemplateBegin {"template":"one"} -->
<div class="row notices" id="admin">comment One content</div>
<!-- DebugDataTemplateEnd {"template":"one"} -->
<!-- DebugDataTemplateBegin {"template":"two"} -->
<div class="row notices" id="admin">comment Two content</div>
<!-- DebugDataTemplateEnd {"template":"two"} -->
one
<br/>
two
JS:
var getComment = function (templateName) {
return $("body").contents().filter(function () {
return this.nodeType == 8 && this.nodeValue.match(RegExp('DebugDataTemplateBegin.*'+templateName));
})
}
$('a').hover(function () {
var templateName = this.href.split('#')[1];
var comment = getComment(templateName);
var element = $(comment).next();
element.toggleClass('highlight');
})
http://jsfiddle.net/md79aaby/18/