I am a high school student and I am trying to make a password cracker to show my school how vulnerable their Student Dashboard is. A student Dashboard is a website that contains student accounts, links, and private information like addresses, passwords, and relatives.
Everyone's password has the following syntax: Pmonth/day/year
EXAMPLE: P05/03/2005
There is a problem though, when the code clicks the sign in button, the URL changes, and the page reloads, which stops the code when I run it in the console.
Is there a way that I could keep the code running from console even if page reloads.
I have thought of using web cookies to store the last used password, and then when the page reloads, just input it into the password textbox, but I am not sure, since I haven't used cookies before.
Any help is greatly appreciated.
What I am aiming to do is that I input an Id, and then it tries to crack the password by going through all dates a year has after 2003.
I will appreciate all answers, but I would like my answer in raw javascript(no libraries).
The sign in page consists of an username textbox, a password textbox and a sign in button.
Here's what the sign in page looks like: Sign in page
Here is the source code of the page:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=10.000"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<meta http-equiv="cache-control" content="no-cache,no-store"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="expires" content="-1"/>
<meta name='mswebdialog-title' content='Connecting to Broward County Public Schools'/>
<title>Sign In</title>
<script type='text/javascript'>
//<![CDATA[
function LoginErrors(){this.userNameFormatError = 'Enter your user ID in the format \u0026quot;domain\\user\u0026quot; or \u0026quot;user#domain\u0026quot;.'; this.passwordEmpty = 'Enter your password.'; this.passwordTooLong = 'Password must be shorter than 128 characters.';}; var maxPasswordLength = 128;
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
// Copyright (c) Microsoft Corporation. All rights reserved.
function InputUtil(errTextElementID, errDisplayElementID) {
if (!errTextElementID) errTextElementID = 'errorText';
if (!errDisplayElementID) errDisplayElementID = 'error';
this.hasFocus = false;
this.errLabel = document.getElementById(errTextElementID);
this.errDisplay = document.getElementById(errDisplayElementID);
};
InputUtil.prototype.canDisplayError = function () {
return this.errLabel && this.errDisplay;
}
InputUtil.prototype.checkError = function () {
if (!this.canDisplayError){
throw new Error ('Error element not present');
}
if (this.errLabel && this.errLabel.innerHTML) {
this.errDisplay.style.display = '';
var cause = this.errLabel.getAttribute('for');
if (cause) {
var causeNode = document.getElementById(cause);
if (causeNode && causeNode.value) {
causeNode.focus();
this.hasFocus = true;
}
}
}
else {
this.errDisplay.style.display = 'none';
}
};
InputUtil.prototype.setInitialFocus = function (input) {
if (this.hasFocus) return;
var node = document.getElementById(input);
if (node) {
if ((/^\s*$/).test(node.value)) {
node.focus();
this.hasFocus = true;
}
}
};
InputUtil.prototype.setError = function (input, errorMsg) {
if (!this.canDisplayError) {
throw new Error('Error element not present');
}
input.focus();
if (errorMsg) {
this.errLabel.innerHTML = errorMsg;
}
this.errLabel.setAttribute('for', input.id);
this.errDisplay.style.display = '';
};
InputUtil.makePlaceholder = function (input) {
var ua = navigator.userAgent;
if (ua != null &&
(ua.match(/MSIE 9.0/) != null ||
ua.match(/MSIE 8.0/) != null ||
ua.match(/MSIE 7.0/) != null)) {
var node = document.getElementById(input);
if (node) {
var placeholder = node.getAttribute("placeholder");
if (placeholder != null && placeholder != '') {
var label = document.createElement('input');
label.type = "text";
label.value = placeholder;
label.readOnly = true;
label.style.position = 'absolute';
label.style.borderColor = 'transparent';
label.className = node.className + ' hint';
label.tabIndex = -1;
label.onfocus = function () { this.nextSibling.focus(); };
node.style.position = 'relative';
node.parentNode.style.position = 'relative';
node.parentNode.insertBefore(label, node);
node.onkeyup = function () { InputUtil.showHint(this); };
node.onblur = function () { InputUtil.showHint(this); };
node.style.background = 'transparent';
node.setAttribute("placeholder", "");
InputUtil.showHint(node);
}
}
}
};
InputUtil.focus = function (inputField) {
var node = document.getElementById(inputField);
if (node) node.focus();
};
InputUtil.hasClass = function(node, clsName) {
return node.className.match(new RegExp('(\\s|^)' + clsName + '(\\s|$)'));
};
InputUtil.addClass = function(node, clsName) {
if (!this.hasClass(node, clsName)) node.className += " " + clsName;
};
InputUtil.removeClass = function(node, clsName) {
if (this.hasClass(node, clsName)) {
var reg = new RegExp('(\\s|^)' + clsName + '(\\s|$)');
node.className = node.className.replace(reg, ' ');
}
};
InputUtil.showHint = function (node, gotFocus) {
if (node.value && node.value != '') {
node.previousSibling.style.display = 'none';
}
else {
node.previousSibling.style.display = '';
}
};
//]]>
</script>
<link rel="stylesheet" type="text/css" href="/adfs/portal/css/style.css?id=D74D4D6943F32AE6F7F11D14D601DBB0E1A58919176EE512150366B6279AAF99" /><style>.illustrationClass {background-image:url(/adfs/portal/illustration/illustration.jpg?id=EB0C84D8C0F5E1E10127F3AD4A4C45BCDAA7AC32FFE204DACEBEAF85C61DA2F9);}</style>
</head>
<body dir="ltr" class="body">
<div id="noScript" style="position:static; width:100%; height:100%; z-index:100">
<h1>JavaScript required</h1>
<p>JavaScript is required. This web browser does not support JavaScript or JavaScript in this web browser is not enabled.</p>
<p>To find out if your web browser supports JavaScript or to enable JavaScript, see web browser help.</p>
</div>
<script type="text/javascript" language="JavaScript">
document.getElementById("noScript").style.display = "none";
</script>
<div id="fullPage">
<div id="brandingWrapper" class="float">
<div id="branding"></div>
</div>
<div id="contentWrapper" class="float">
<div id="content">
<div id="header">
<img class="logoImage" src="/adfs/portal/logo/logo.png?id=4F68FA71CF303418A19ABB7297038B46FA3E25ED3754C2175A7B840EC6F97BE8" alt="Broward County Public Schools"/>
</div>
<div id="workArea">
<div id="authArea" class="groupMargin">
<div id="loginArea">
<div id="loginMessage" class="groupMargin">Sign in with your organizational account</div>
<form method="post" id="loginForm" autocomplete="off" novalidate="novalidate" onKeyPress="if (event && event.keyCode == 13) Login.submitLoginRequest();" action="/adfs/ls/?wctx=WsFedOwinState%3doJ9avOrRYr1UaVPxwGOAIzjfQ78zxpRhLHRmhne8M1AEjI9Y5SUSP0viJgR2iCtpjpu-gGqW73MjMkyVrK9b_N9m5JlVSyznBQxTGDsRm5WDilyumMYDi4x5qL9-To1jCTs2bXP7iiZJuHS0aLiN-jXhIHy26i4J9qpsUHbiivCUYCZQNb0m68RqVJwDU-Cqf0DW1ieuP1_sAcqk3l0nwBlRoG-cO039YHVhBOyZSbnHfZtGqJRSX7p6yt5wwRQ6Y5vz9dPJ8V7FTz6-GIZPnk4ee4A&wa=wsignin1.0&wtrealm=http%3a%2f%2fgb.browardschools.com%2fpinnacle%2fgradebook%2f" >
<div id="error" class="fieldMargin error smallText">
<label id="errorText" for=""></label>
</div>
<div id="formsAuthenticationArea">
<div id="userNameArea">
<input id="userNameInput" name="UserName" type="email" value="" tabindex="1" class="text fullWidth"
spellcheck="false" placeholder="someone#example.com" autocomplete="off"/>
</div>
<div id="passwordArea">
<input id="passwordInput" name="Password" type="password" tabindex="2" class="text fullWidth"
placeholder="Password" autocomplete="off"/>
</div>
<div id="kmsiArea" style="display:none">
<input type="checkbox" name="Kmsi" id="kmsiInput" value="true" tabindex="3" />
<label for="kmsiInput">Keep me signed in</label>
</div>
<div id="submissionArea" class="submitMargin">
<span id="submitButton" class="submit" tabindex="4"
onKeyPress="if (event && event.keyCode == 32) Login.submitLoginRequest();"
onclick="return Login.submitLoginRequest();">Sign in</span>
</div>
</div>
<input id="optionForms" type="hidden" name="AuthMethod" value="FormsAuthentication"/>
</form>
<div id="authOptions">
<form id="options" method="post" action="https://fs.browardschools.com:443/adfs/ls/?wctx=WsFedOwinState%3doJ9avOrRYr1UaVPxwGOAIzjfQ78zxpRhLHRmhne8M1AEjI9Y5SUSP0viJgR2iCtpjpu-gGqW73MjMkyVrK9b_N9m5JlVSyznBQxTGDsRm5WDilyumMYDi4x5qL9-To1jCTs2bXP7iiZJuHS0aLiN-jXhIHy26i4J9qpsUHbiivCUYCZQNb0m68RqVJwDU-Cqf0DW1ieuP1_sAcqk3l0nwBlRoG-cO039YHVhBOyZSbnHfZtGqJRSX7p6yt5wwRQ6Y5vz9dPJ8V7FTz6-GIZPnk4ee4A&wa=wsignin1.0&wtrealm=http%3a%2f%2fgb.browardschools.com%2fpinnacle%2fgradebook%2f">
<script type="text/javascript">
function SelectOption(option) {
var i = document.getElementById('optionSelection');
i.value = option;
document.forms['options'].submit();
return false;
}
</script>
<input id="optionSelection" type="hidden" name="AuthMethod" />
<div class='groupMargin'></div>
</form>
</div>
<div id="introduction" class="groupMargin">
<p align=center><b>REPORT CHILD ABUSE</b></p><p align=center><b>CALL 1-800-96ABUSE OR 1-800-962-2873</b></p></BR><p align=center><b>Students</b></p><p>If you are a student, your login name is your
student number (06########). If you have forgotten your password, please contact your teacher. </p></BR><p
align=center><b>Staff</b></p><p>If you are staff, your login name should be your staff ID (P0#######). If you have forgotten your password,
please contact your tech.</p></BR><p align=center><b>Parents Accessing Pinnacle</b></p><p>If you are a parent of a student in grades 6-12
and are accessing Pinnacle, please use your child’s Active Directory userid and password to login. If you are the parent of a child in
grades 3-5, please use the <b>BCPS Mobile App</b> to view the current average grade your child has earned in each class.</p>
</div>
<script type="text/javascript">
//<![CDATA[
function Login() {
}
Login.userNameInput = 'userNameInput';
Login.passwordInput = 'passwordInput';
Login.initialize = function () {
var u = new InputUtil();
u.checkError();
u.setInitialFocus(Login.userNameInput);
u.setInitialFocus(Login.passwordInput);
}();
Login.submitLoginRequest = function () {
var u = new InputUtil();
var e = new LoginErrors();
var userName = document.getElementById(Login.userNameInput);
var password = document.getElementById(Login.passwordInput);
if (!userName.value || !userName.value.match('[#\\\\]')) {
u.setError(userName, e.userNameFormatError);
return false;
}
if (!password.value) {
u.setError(password, e.passwordEmpty);
return false;
}
if (password.value.length > maxPasswordLength) {
u.setError(password, e.passwordTooLong);
return false;
}
document.forms['loginForm'].submit();
return false;
};
InputUtil.makePlaceholder(Login.userNameInput);
InputUtil.makePlaceholder(Login.passwordInput);
//]]>
</script>
</div>
</div>
</div>
<div id="footerPlaceholder"></div>
</div>
<div id="footer">
<div id="footerLinks" class="floatReverse">
<div><span id="copyright">© 2013 Microsoft</span></div>
</div>
</div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
// Copyright (c) Microsoft Corporation. All rights reserved.
// This file contains several workarounds on inconsistent browser behaviors that administrators may customize.
"use strict";
// iPhone email friendly keyboard does not include "\" key, use regular keyboard instead.
// Note change input type does not work on all versions of all browsers.
if (navigator.userAgent.match(/iPhone/i) != null) {
var emails = document.querySelectorAll("input[type='email']");
if (emails) {
for (var i = 0; i < emails.length; i++) {
emails[i].type = 'text';
}
}
}
// In the CSS file we set the ms-viewport to be consistent with the device dimensions,
// which is necessary for correct functionality of immersive IE.
// However, for Windows 8 phone we need to reset the ms-viewport's dimension to its original
// values (auto), otherwise the viewport dimensions will be wrong for Windows 8 phone.
// Windows 8 phone has agent string 'IEMobile 10.0'
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode(
"#-ms-viewport{width:auto!important}"
)
);
msViewportStyle.appendChild(
document.createTextNode(
"#-ms-viewport{height:auto!important}"
)
);
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
// If the innerWidth is defined, use it as the viewport width.
if (window.innerWidth && window.outerWidth && window.innerWidth !== window.outerWidth) {
var viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=' + window.innerWidth + 'px; initial-scale=1.0; maximum-scale=1.0');
}
// Gets the current style of a specific property for a specific element.
function getStyle(element, styleProp) {
var propStyle = null;
if (element && element.currentStyle) {
propStyle = element.currentStyle[styleProp];
}
else if (element && window.getComputedStyle) {
propStyle = document.defaultView.getComputedStyle(element, null).getPropertyValue(styleProp);
}
return propStyle;
}
// The script below is used for downloading the illustration image
// only when the branding is displaying. This script work together
// with the code in PageBase.cs that sets the html inline style
// containing the class 'illustrationClass' with the background image.
var computeLoadIllustration = function () {
var branding = document.getElementById("branding");
var brandingDisplay = getStyle(branding, "display");
var brandingWrapperDisplay = getStyle(document.getElementById("brandingWrapper"), "display");
if (brandingDisplay && brandingDisplay !== "none" &&
brandingWrapperDisplay && brandingWrapperDisplay !== "none") {
var newClass = "illustrationClass";
if (branding.classList && branding.classList.add) {
branding.classList.add(newClass);
} else if (branding.className !== undefined) {
branding.className += " " + newClass;
}
if (window.removeEventListener) {
window.removeEventListener('load', computeLoadIllustration, false);
window.removeEventListener('resize', computeLoadIllustration, false);
}
else if (window.detachEvent) {
window.detachEvent('onload', computeLoadIllustration);
window.detachEvent('onresize', computeLoadIllustration);
}
}
};
if (window.addEventListener) {
window.addEventListener('resize', computeLoadIllustration, false);
window.addEventListener('load', computeLoadIllustration, false);
}
else if (window.attachEvent) {
window.attachEvent('onresize', computeLoadIllustration);
window.attachEvent('onload', computeLoadIllustration);
}
if (typeof Login != 'undefined'){
Login.submitLoginRequest = function () {
var u = new InputUtil();
var e = new LoginErrors();
var userName = document.getElementById(Login.userNameInput);
var password = document.getElementById(Login.passwordInput);
if (userName.value && !userName.value.match('[#\\\\]'))
{
var userNameValue = 'browardschools\\' + userName.value;
document.forms['loginForm'].UserName.value = userNameValue;
}
if (!userName.value) {
u.setError(userName, e.userNameFormatError);
return false;
}
if (!password.value)
{
u.setError(password, e.passwordEmpty);
return false;
}
document.forms['loginForm'].submit();
return false;
};
}
// Check whether the loginMessage element is present on this page.
var loginMessage = document.getElementById('loginMessage');
if (loginMessage)
{
// loginMessage element is present, modify its properties.
loginMessage.innerHTML = 'Sign in with your Browardschools Personnel Number or Student Number';
}
//]]>
</script>
</body>
</html>
Here is my following code:
//Gets id textbox
var username = document.getElementById("userNameInput");
//Gets password textbox
var password = document.getElementById("passwordInput");
//Gets button
var clickbutton = document.getElementById("submitButton");
var num1 = 1; // Month, start
var num2 = 0; // Day start
var num3 = 2003; // Year start
var id = username.value;
var passwrd = password.value;
var _DOB = "P" + "0" + num1 + "/" + num2 + "/" + num3; //Sets up the syntax for password Pmonth/day/year
function writeInput()
{
password.value = _DOB; // writes the _DOB value into the password textbox
clickbutton.click(); //clicks the sign in button
//SOTRES THE ID
id = username.value;
//ADDS THE NEXT DAY
num2 += 1; // If password is incorrect.
//RESETS DAY WHEN REACHES 31(max number a month has)
if(num2 > 31)
{
num2 = 1; // resets day to 1
num1 += 1; // adds 1 to the month count.
}
// ADDS NEXT YEAR
if(num2 == 31 && num1 == 12) // when reaches the last day of a year, it resets month and day, but adds one to the year count.
{
num3 += 1;
}
//RESET MONTH
if(num1 > 12)
{
num1 = 1;
}
if(num2 < 10)//Adds 0 to month and day if it is less than 10. Example: P5/5/2021 is not a correct systax, it turns to P05/05/2021. It adds the zeroes.
{
_DOB = "P" + "0" + num1 + "/" + "0" + num2 + "/" + num3;
}
else
{
_DOB = "P" + "0" + num1 + "/" + num2 + "/" + num3;
}
//Some output
clickbutton.onclick = console.log("SIGN IN BUTTON CLICKED");
console.log("Password used: " + _DOB);
}
}, 100);
}
setInterval(function()
{
writeInput();
}, 500);
Your challenge is to persist your JavaScript code inside a website hosted by someone else. All code within your browsers console is obsolete after page reload.
Another challenge you are facing is a legal one. It's highly recommended to get a permission to access an online service for the purpose you described. Any kind of security assessment has to be coordinated and aligned with the organization responsible for the questioned online service.
Since you will not want to change the content of the web server for legal reasons, you would need a tool manipulate the content served by the webserver within your client (read "browser").
There are browser automation tool like Puppeteer or Selenium Webdriver you can use to request any url repeatedly and to automate certain actions within the context of a browser like clicking elements, filling forms, executing JavaScript and so on.
Additionally there a fuzzers that can perform what is called credential stuffing. You can read more here about Burp Suite.
Related
I am learning to use the "Article Search API" provided by the New York Times to allow my web application to display news articles based on the search results. I followed the tutorial at https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs and used their javascript code as closely as I could. The issue is that when I clicked on the 'submit search' button, my web-developer's console on Firefox showed me the message:
"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://nyt-prod.apigee.net/svc/search/v2/articlesearch.json?api-key=(MY KEY: CENSORED)&page=0&q=Trump&fq=document_type:(%22article%22)&begin_date=2019-01-01&end_date=2019-01-05. (Reason: Multiple CORS header ‘Access-Control-Allow-Origin’ not allowed)."
This is where I am getting stuck. I really do not know what is happening here.
The 'Article Search API' is currently using the base URL 'https://nyt-prod.apigee.net/svc/search/v2/articlesearch.json', which I did carefully examine. I do not think the base-url has any problem, as can be conjectured based on the error message I got. I also tried to run this on Chrome and was using the Python testing server, but the problem remains.
I am willing to show the entire html file including the javascript.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>NY Times API example</title>
<link href="nytimes.css" rel="stylesheet">
</head>
<body>
<h1>NY Times video search</h1>
<div class="wrapper">
<div class="controls">
<form>
<p>
<label for="search">Enter a SINGLE search term (required): </label>
<input type="text" id="search" class="search" required>
</p>
<p>
<label for="start-date">Enter a start date (format YYYYMMDD): </label>
<input type="date" id="start-date" class="start-date" pattern="[0-9]{8}">
</p>
<p>
<label for="end-date">Enter an end date (format YYYYMMDD): </label>
<input type="date" id="end-date" class="end-date" pattern="[0-9]{8}">
</p>
<p>
<button class="submit">Submit search</button>
</p>
</form>
</div>
<div class="results">
<nav>
<button class="prev">Previous 10</button>
<button class="next">Next 10</button>
</nav>
<section>
</section>
</div>
</div>
<script>
// Defining a baseURL and key to as part of the request URL
var baseURL = 'https://nyt-prod.apigee.net/svc/search/v2/articlesearch.json';
var key = 'CENSORED';
var url;
// Grab references to all the DOM elements you'll need to manipulate
var searchTerm = document.querySelector('.search');
var startDate = document.querySelector('.start-date');
var endDate = document.querySelector('.end-date');
var searchForm = document.querySelector('form');
var submitBtn = document.querySelector('.submit');
var nextBtn = document.querySelector('.next');
var previousBtn = document.querySelector('.prev');
var section = document.querySelector('section');
var nav = document.querySelector('nav');
// Hide the "Previous"/"Next" navigation to begin with, as we don't need it immediately
nav.style.display = 'none';
// define the initial page number and status of the navigation being displayed
var pageNumber = 0;
var displayNav = false;
// Event listeners to control the functionality
searchForm.addEventListener('submit', submitSearch);
function submitSearch(e) {
pageNumber = 0;
fetchResults(e);
}
function fetchResults(e) {
// Use preventDefault() to stop the form from submitting:
e.preventDefault();
// Assemble the full URL:
url = baseURL + '?api-key=' + key + '&page=' + pageNumber + '&q=' + searchTerm.value + '&fq=document_type:("article")';
if (startDate.value !== '') {
url += '&begin_date=' + startDate.value;
}
if (endDate.value !== '') {
url += '&end_date=' + endDate.value;
}
// Use fetch() to make the request to the API
fetch(url).then(function(result) {
return result.json();
}).then(function(json) {
displayResults(json);
});
}
function displayResults(json) {
while (section.firstChild) {
section.removeChild(section.firstChild);
}
var articles = json.response.docs;
if(articles.length === 10) {
nav.style.display = 'block';
} else {
nav.style.display = 'none';
}
if(articles.length === 0) {
var para = document.createElement('p');
para.textContent = 'No results returned.'
section.appendChild(para);
} else {
for(var i = 0; i < articles.length; i++) {
var article = document.createElement('article');
var heading = document.createElement('h2');
var link = document.createElement('a');
var img = document.createElement('img');
var para1 = document.createElement('p');
var para2 = document.createElement('p');
var clearfix = document.createElement('div');
var current = articles[i];
console.log(current);
link.href = current.web_url;
link.textContent = current.headline.main;
para1.textContent = current.snippet;
para2.textContent = 'Keywords: ';
for(var j = 0; j < current.keywords.length; j++) {
var span = document.createElement('span');
span.textContent += current.keywords[j].value + ' ';
para2.appendChild(span);
}
if(current.multimedia.length > 0) {
img.src = 'http://www.nytimes.com/' + current.multimedia[0].url;
img.alt = current.headline.main;
}
clearfix.setAttribute('class','clearfix');
article.appendChild(heading);
heading.appendChild(link);
article.appendChild(img);
article.appendChild(para1);
article.appendChild(para2);
article.appendChild(clearfix);
section.appendChild(article);
}
}
};
</script>
</body>
</html>
But I think the most important lines are as follows:
var baseURL = 'https://nyt-prod.apigee.net/svc/search/v2/articlesearch.json';
var key = 'CENSORED';
...
...
url = baseURL + '?api-key=' + key + '&page=' + pageNumber + '&q=' + searchTerm.value + '&fq=document_type:("article")';
...
...
fetch(url).then(function(result) {
return result.json();
}).then(function(json) {
displayResults(json);
});
...
...
if(current.multimedia.length > 0) {
img.src = 'http://www.nytimes.com/' + current.multimedia[0].url;
img.alt = current.headline.main;
}
The news articles are supposed to show up on the right hand side in blocks arranged in a vertical fashion. With this error, I saw nothing. I hope someone can help me.
I have worked for a while on this code for learning purposes. I finally got the program to work, however when you "roll the dice", it only allows the dice to be rolled 1 time; If you wish to roll the dice a second time you must refresh the screen.
I am trying to build a reset function for this program so that I can roll the dice as many times as I wish without a screen-refresh.
I have built the reset function, but It is not working... It clear's the DIV's, but doesn't allow the program to be executed again.
Can someone please help me out?
*I am a semi-noobie at Javascript, I am making programs like this to practice my skills.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dice Rolling</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<h1>Roll the Dice!</h1>
<h2>By: Jeff Ward</h2>
</header>
<h3>Setup your Dice!</h3>
<div id="left">
<form id="numberOfDiceSelection">
Number Of Dice Used:
<br>
<input id="numberOfDice" type="text" name="numberOfDice">
</form>
</div>
<div id="right">
<form id="diceSidesSelection">
Number of sides on each dice:
<br>
<input id="diceSides" type="text" name="diceSides">
</form>
</div>
<button type="button" onclick="roll()">Roll the Dice!</button>
<button type="button" onclick="reset()">Reset Roll</button>
<div id="output">
</div>
<div id="output1">
</div>
<script src="js/script.js"></script>
</body>
</html>
JavaScript:
function roll() {
var text = "";
var sides = +document.getElementById("diceSides").value;
var dice = +document.getElementById("numberOfDice").value;
var rolls = [];
// --------Ensures both Numbers are Intergers-----------
if (isNaN(sides) || isNaN(dice)) {
alert("Both arguments must be numbers.");
}
// --------Loop to Print out Rolls-----------
var counter = 1;
do {
roll = Math.floor(Math.random() * sides) + 1;
text += "<h4>You rolled a " + roll + "! ----- with dice number " + counter + "</h4>";
counter++;
rolls.push(roll);
}
while (counter <= dice)
document.getElementById("output").innerHTML = text;
// --------Double Determination-----------
var cache = {};
var results = [];
for (var i = 0, len = rolls.length; i < len; i++) {
if (cache[rolls[i]] === true) {
results.push(rolls[i]);
} else {
cache[rolls[i]] = true;
}
// --------Print amount of Doubles to Document-----------
}
if (results.length === 0) {} else {
document.getElementById("output1").innerHTML = "<h5> You rolled " + results.length + " doubles</h5>";
}
}
// --------RESET FUNCTION-----------
function reset() {
document.getElementById("output1").innerHTML = "";
document.getElementById("output").innerHTML = "";
document.getElementById("diceSides").value = "";
document.getElementById("numberOfDice").value = "";
text = "";
rolls = [];
}
Thank you!!
JSFiddle Link = https://jsfiddle.net/kkc6tpxs/
I rewrote and did what you were trying to do:
https://jsfiddle.net/n8oesvoo/
var log = logger('output'),
rollBtn = getById('roll'),
resetBtn = getById('reset'),
nDices = getById('numofdices'),
nSides = getById('numofsides'),
dices = null,
sides = null,
rolls = [],
doubles=0;
rollBtn.addEventListener('click',rollHandler);
resetBtn.addEventListener('click', resetHandler);
function rollHandler() {
resetView();
sides = nSides.value;
dices = nDices.value;
doubles=0;
rolls=[];
if(validateInput()) {
log('invalid input');
return;
}
//rolling simulation
var rolled;
while (dices--) {
rolled = Math.ceil(Math.random()*sides);
log('For Dice #'+(dices+1)+' Your Rolled: '+ rolled +'!');
rolls.push(rolled);
}
//finding doubles
//first sort: you can use any way to sort doesnt matter
rolls.sort(function(a,b){
return (a>b?1:(a<b)?0:-1);
});
for (var i =0; i < rolls.length; i++) {
if (rolls[i] == rolls[i+1]) {
doubles++;
i++;
}
}
if (doubles>0) log("You rolled " + doubles + " doubles");
}
function resetHandler(){
resetView();
nDices.value = nSides.value = '';
}
function resetView() {
getById('output').innerText = '';
}
function validateInput(){
return (isNaN(sides) || sides == '' || isNaN(dices) || dices == '');
}
function logger(x) { var output = getById(x);
return function(text){
output.innerText += text + '\n';
};}
function getById(x){ return document.getElementById(x); }
i found this javascript that allow you to chose an option and once you click the go button. It will redirect you to another site. I have try modify this so i can use it with a button instead of a radio but it doesn't seem to work. Can any 1 help me out ??
Thank you very much.
here the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
//chose which page to go to
function Link() {
if (document.fred.r1[0].checked) {
window.top.location = 'http://kshowonline.com/list';
}
if (document.fred.r1[1].checked) {
window.top.location = 'https://www.google.com/';
}
if (document.fred.r1[2].checked) {
window.top.location = 'https://www.yahoo.com/';
}
if (document.fred.r1[3].checked) {
window.top.location = 'https://nodejs.org/';
}
}
//-->
</script>
</head>
<body onload="f19_GetFormCookie();Link();">
<form title="f19_Include" name="fred">
<INPUT type="radio" name="r1">Baseball
<INPUT type="radio" name="r1">Basketball
<INPUT type="radio" name="r1">Soccer
<INPUT type="radio" name="r1">Fencing
<INPUT type="button" value="GO" onclick="f19_SetFormCookie();Link();">
</form>
<script language="JavaScript" type="text/javascript">
<!--
// A Cookie Script to Store and Retrieve
// the values and states of common form elements
// TEXT BOXES - value
// TEXT AREA - value
// CHECK BOX - checked state
// RADIO BUTTON - checked state
// SELECT LIST - selected Index
// Application Notes and Customising Variables
// Application Notes
// Values and states of each element are stored
// as the page is unloaded or form submitted.
// The storage duration is specified by a customising variable
// Stored values and states of elements included in the cookie
// are re-established as the page is reloaded.
// The number and type of elements included must respect
// the maximum cookie size of 4K.
// The Retrieval is initialised by a <BODY> onload event
// The Storage occurs on a <BODY> onunload event
// e.g.
// <body onload="f19_GetFormCookie();" onunload="f19_SetFormCookie();" >
// To include a form element in the Store and Retrieve
// it must be child nodes of an element with a title of 'f19_Include'
// e.g.
// <span title="f19_Include" >
// <INPUT type="text" size="10" >
// <INPUT type="checkbox >
// </span>
// There may be any number of elements titled 'f19_Include' on a page
// and as many child elements of each 'f19_Include' as required.
// All variable, function etc. names are prefixed with 'f19_'
// to minimise conflicts with other JavaScripts
// Customising Variables
var f19_Days = 1; // The cookie will be available on revisits for a specified number of days
var f19_Cookie = 'My Form2'; // The Cookie name
//-->
</script>
<script language="JavaScript" type="text/javascript">
<!--
// Form Compendium f19_Part2 (12-05-2005)
// Functional Code
// No Need To Change ***************************
var f19_TBAry = new Array();
var f19_RCAry = new Array();
var f19_TAAry = new Array();
var f19_SLAry = new Array();
var f19_TBString, f19_RCString, f19_TAString, f19_SLString;
var f19_, f19_exp, f19_st, f19_len, f19_end, f19_st;
var f19_Exp = new Date(new Date().getTime() + f19_Days * 86400000).toGMTString();
function f19_GetFormCookie() {
f19_TBString = f19_GetCookie(f19_Cookie + 'TB');
f19_RCString = f19_GetCookie(f19_Cookie + 'RC');
f19_SLString = f19_GetCookie(f19_Cookie + 'SL');
f19_TAString = f19_GetCookie(f19_Cookie + 'TA');
f19_ = document.getElementsByTagName('*');
for (f19_0 = 0; f19_0 < f19_.length; f19_0++) {
if (f19_[f19_0].title == 'f19_Include') {
f19_Inc = f19_[f19_0].getElementsByTagName('*');
for (f19_1 = 0; f19_1 < f19_Inc.length; f19_1++) {
if (f19_Inc[f19_1].tagName == 'INPUT') {
if (f19_Inc[f19_1].type == 'text') {
f19_TBAry[f19_TBAry.length] = f19_Inc[f19_1];
}
if (f19_Inc[f19_1].type == 'radio' || f19_Inc[f19_1].type == 'checkbox') {
f19_RCAry[f19_RCAry.length] = f19_Inc[f19_1];
}
}
if (f19_Inc[f19_1].tagName == 'TEXTAREA') {
f19_TAAry[f19_TAAry.length] = f19_Inc[f19_1];
}
if (f19_Inc[f19_1].tagName == 'SELECT') {
f19_SLAry[f19_SLAry.length] = f19_Inc[f19_1];
}
}
}
}
if (f19_TBString) {
for (f19_1 = 0; f19_1 < f19_TBAry.length; f19_1++) {
f19_TBAry[f19_1].value = f19_TBString.split('~^~')[f19_1];
}
}
if (f19_RCString) {
for (f19_2 = 0; f19_2 < f19_RCAry.length; f19_2++) {
f19_RCAry[f19_2].checked = false;
if (f19_RCString.split('~^~')[f19_2] == 'true') {
f19_RCAry[f19_2].checked = true;
}
}
}
if (f19_TAString) {
for (f19_3 = 0; f19_3 < f19_TAAry.length; f19_3++) {
f19_TAAry[f19_3].value = f19_TAString.split('~^~')[f19_3];
}
}
if (f19_SLString) {
for (f19_4 = 0; f19_4 < f19_SLAry.length; f19_4++) {
f19_SLAry[f19_4].selectedIndex = f19_SLString.split('~^~')[f19_4];
}
}
}
function f19_GetCookie(name) {
var f19_st = document.cookie.indexOf(name + "=");
var f19_len = f19_st + name.length + 1;
if ((!f19_st) && (name != document.cookie.substring(0, name.length))) return null;
if (f19_st == -1) return null;
var f19_end = document.cookie.indexOf(";", f19_len);
if (f19_end == -1) f19_end = document.cookie.length;
return decodeURI(document.cookie.substring(f19_len, f19_end));
}
function f19_SetFormCookie(value) {
f19_TBString = '';
for (f19_0 = 0; f19_0 < f19_TBAry.length; f19_0++) {
f19_TBString += f19_TBAry[f19_0].value + '~^~';
}
document.cookie = f19_Cookie + "TB=" + encodeURI(f19_TBString) + ";expires=" + f19_Exp + ";path=/;"
f19_RCString = '';
for (f19_1 = 0; f19_1 < f19_RCAry.length; f19_1++) {
f19_RCString += f19_RCAry[f19_1].checked + '~^~';
}
document.cookie = f19_Cookie + "RC=" + encodeURI(f19_RCString) + ";expires=" + f19_Exp + ";path=/;"
f19_TAString = '';
for (f19_0 = 0; f19_0 < f19_TAAry.length; f19_0++) {
f19_TAString += f19_TAAry[f19_0].value + '~^~';
}
document.cookie = f19_Cookie + "TA=" + encodeURI(f19_TAString) + ";expires=" + f19_Exp + ";path=/;"
f19_SLString = '';
for (f19_1 = 0; f19_1 < f19_SLAry.length; f19_1++) {
f19_SLString += f19_SLAry[f19_1].selectedIndex + '~^~';
}
document.cookie = f19_Cookie + "SL=" + encodeURI(f19_SLString) + ";expires=" + f19_Exp + ";path=/;"
}
//-->
</script>
</body>
</html>
You can use onclick event on radio buttons:
http://www.dyn-web.com/tutorials/forms/radio/onclick-onchange.php
You could modify your code to use Buttons instead RadioButtons.
It should resemble the following:
<button name="b1" onclick="f19_SetFormCookie('Baseball')">Baseball</button>
<button name="b2" onclick="f19_SetFormCookie('Basketball')">Basketball</button>
<button name="b3" onclick="f19_SetFormCookie('Soccer')">Soccer</button>
<button name="b4" onclick="f19_SetFormCookie('Fencing')">Fencing</button>
Then you'll have to modify SetFormCookie function to accept the argument - based on which cookie will be set.
i am new to JavaScript and this site and am trying to make a username and password creator and log in. for now i am just using a premade username and password for now. i have tried to do this with JavaScript but my code wont work for me on notepad++. i have learned a basic understanding of jQuery as a last resort to get this mock up site to run. can you tell me if there is a way to do it with JavaScript and how and if not can you explain the code to share variables across two different webpages using jQuery. pleas explain in plain simple English because as i said i am new to JavaScript and brand new to jQuery.
here is where the username and password variables are defined.
<!DOCTYPE html>
<html>
<head>
<title>
create account
</title>
<script>
sessionStorage.setItem( "username1", ["bob", "sam"]);
sessionStorage.setItem( "password1", ["lol", "jk"]);
</script>
</head>
<body>
</body>
</html>
here is where i call those variables
<!DOCTYPE html>
<html>
<head>
<title>
log on page
</title>
<script type = "text/javascript">
var count = 2;
function validate() {
var un = document.myform.username.value;
var pw = document.myform.pword.value;
var valid = false;
var unArray = sessionStorage.getItem("username1");
var unArray = sessionStorage.getItem("password1");
for (var i=0; i <unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
valid = true;
break;
}
}
if (valid) {
alert ("Login was successful");
window.location = "http://www.google.com";
return false;
}
var t = " tries";
if (count == 1) {t = " try"}
if (count >= 1) {
alert ("Invalid username and/or password. " +
"You have " + count + t + " left.");
document.myform.username.value = "";
document.myform.pword.value = "";
setTimeout("document.myform.username.focus()", 25);
setTimeout("document.myform.username.select()", 25);
count --;
}
else {
alert ("Still incorrect! You have no more tries left!");
document.myform.username.value = "No more tries allowed!";
document.myform.pword.value = "";
document.myform.username.disabled = true;
document.myform.pword.disabled = true;
return false;
}
}
</script>
<!--this-->
<style>
p.log_on{
position: fixed;
top: 30px;
left: 20px;
}
</style>
</head>
<body>
<!--here-->
<form name = "myform">
<p class="log_on">
ENTER USER NAME <input type="text" name="username"><br><br><br><br><br>
ENTER PASSWORD <input type="password" name="pword">
<input type="button" value="Check In" name="Submit" onclick="validate()">
</p>
</form>
<!--to here-->
</body>
</html>
im trying to show a value (Staff name) when a variable is entered under the Staff ID
this is a local hta upload into our server
im still learning hope that anyone can help me
here's the script
<title>Test Login</title>
<head>
<HTA:APPLICATION
ID="TestLogin"
APPLICATIONNAME="Login"
SysMenu="no"
BORDER="thin"
CONTEXTMENU="no"
ICON="images/help.ico"
MAXIMIZEBUTTON="no"
MINIMIZEBUTTON="no"
window.resizeTo 400,250
RESIZE="no"
SCROLL="no"
SINGLEINSTANCE="yes"
WINDOWSTATE="normal" />
</head>
<body STYLE="font:14 pt arial; color:white;
filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=1, StartColorStr='#000000', EndColorStr='#0000FF')">
<script type = "text/javascript">
var count = 2;
function validate() {
var un = document.myform.username.value;
var pw = document.myform.pword.value;
var valid = false;
var unArray = ["4020004", "4020031", "4020025",];
var pwArray = ["4020004", "4020031", "4020025",];
for (var i=0; i <unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
valid = true;
break;
}
}
if (valid) {
WshShell = new ActiveXObject("WScript.Shell");
WshShell.Run("CALL MAIN WINDOW", 1, false);
return false;
}
var t = " tries";
if (count == 1) {t = " try"}
if (count >= 1) {
alert ("Invalid username and/or password. You have " + count + t + " left.");
document.myform.username.value = "";
document.myform.pword.value = "";
setTimeout("document.myform.username.focus()", 25);
setTimeout("document.myform.username.select()", 25);
count --;
}
else {
alert ("Still incorrect! You have no more tries left!");
document.myform.username.value = "No more tries allowed!";
document.myform.pword.value = "";
document.myform.username.disabled = true;
document.myform.pword.disabled = true;
return false;
}
}
</script>
<SCRIPT Language="VBScript">
</script>
<div style="text-align: center;"><img src="#" alt="#" align="middle" width="200" height="200">
<p>
<p>TEST LOGIN</p>
<form name = "myform">
<p>Staff ID <input type="text" name="username"> </p>
**TRYING TO SHOW STAFF NAME HERE WHEN ID IS ENTER**
<p>Password <input type="password" name="pword"></p>
</form>
This is the original script http://www.javascriptkit.com/script/script2/loginpass2.shtml
thanx in advance
Because you are using an external script, i can't really find where you store the ID.
add the following somewhere in your code where you want to show the staff name:
<div class="staff-name-placeholder">Enter ID</div>
modify input:
<p>Staff ID <input type="text" name="username"> </p>
To:
<p>Staff ID <input type="text" name="username" onchange="updatestaff();"> </p>
add following on the bottom of the page:
<script type="text/javascript">
function updatestaff()
{
document.getElementById('staff-name-placeholder').innerHTML='[PLACE ID]';
}
</script>
It does the following:
binds a listener when the input 'username' is changed.
searches the element with id 'staff-name-placeholder'
replaces the HTML inside the element with '[PLACE ID]'.
Of course, the real id isn't given yet, you must pass it through your other script.
I hope this helps a little bit.