Javascript file partially running - javascript

So I taught myself coding a few years ago, and got it just enough to put together a few tools for work. I recently had to migrate my site out of CodePen and onto an actual web server. Now I'm having an issue where part of my javascript is executing properly (a portion that empties all other input fields when a user enters an input field using JQuery), but the button that calculates an answer will not work. I believe the .click is not picking it up. Either way I'm not getting error messages, the button just does nothing when I press it.
When I put the code in a snippet to share with you guys, it works (just like it did in CodePen), but the exact same code on my web host does not work. I'm really at a loss here and any help would be greatly appreciated. I feel like I'm missing some small line of code that's supposed to be included in all web files.
$(document).ready(function() {
//Clear out input fields when not selected
$("#sg").focusin(function() {
$("#density").val("");
});
$("#density").focusin(function() {
$("#sg").val("");
});
$("#pounds").focusin(function() {
$("#grams").val("");
$("#percentage").val("");
});
$("#grams").focusin(function() {
$("#percentage").val("");
$("#pounds").val("");
});
$("#percentage").focusin(function() {
$("#pounds").val("");
$("#grams").val("");
});
$(".input_field").focusin(function() {
$("#density").removeClass('highlight');
$("#sg").removeClass('highlight');
$("#pounds").removeClass('highlight');
$("#grams").removeClass('highlight');
$("#percentage").removeClass('highlight');
});
//Calculate on press of enter
$("#button").keypress(function(e) {
if (e.which == 13) {
alert("this is working");
}
});
$("#button").click(function() {
calculateButton();
});
//Calculate values on button hit
function calculateButton() {
function numberWithCommas(x) {
x = x.toString();
var pattern = /(-?\d+)(\d{3})/;
while (pattern.test(x))
x = x.replace(pattern, "$1,$2");
return x;
}
function removeCommas(x) {
x = x.replace(",", "");
return x;
}
var results = 0;
//Pulling information from input cells
var densityStr = document.getElementById("density").value;
var sgStr = document.getElementById("sg").value;
var poundsStr = document.getElementById("pounds").value;
var gramsStr = document.getElementById("grams").value;
var percentageStr = document.getElementById("percentage").value;
//remove commas from string and then convert string to number
var densityNum = Number(removeCommas(densityStr));
var sgNum = Number(removeCommas(sgStr));
var poundsNum = Number(removeCommas(poundsStr));
var gramsNum = Number(removeCommas(gramsStr));
var percentageNum = Number(removeCommas(percentageStr));
if (densityStr.length !== 0) {
var sgConversion = densityNum / 8.3454;
$("#sg").val(sgConversion.toFixed(3));
$("#density").addClass('highlight');
} else if (sgStr.length !== 0) {
var densityConversion = sgNum * 8.3454;
$("#density").val(densityConversion.toFixed(3));
$("#sg").addClass('highlight');
}
if (poundsStr.length !== 0) {
$("#pounds").addClass("highlight");
densityNum = document.getElementById("density").value;
var gramsConversion = poundsNum * 119.83;
var percentageConversion = poundsNum / densityNum * 100;
$("#grams").val(gramsConversion.toFixed(0));
$("#percentage").val(percentageConversion.toFixed(2));
} else if (gramsStr.length !== 0) {
$("#grams").addClass("highlight");
densityNum = document.getElementById("density").value;
var poundsConversion = gramsNum / 119.83;
var percentageConversion = poundsConversion / densityNum * 100;
$("#pounds").val(poundsConversion.toFixed(2));
$("#percentage").val(percentageConversion.toFixed(2));
} else if (percentageStr.length !== 0) {
$("#percentage").addClass("highlight");
densityNum = document.getElementById("density").value;
var percentageDec = percentageNum / 100;
var poundsConversion = densityNum * percentageDec;
var gramsConversion = poundsConversion * 119.83;
$("#pounds").val(poundsConversion.toFixed(2));
$("#grams").val(gramsConversion.toFixed(2));
}
}
});
body {
margin: 0;
font-family: 'Lato', sans-serif;
background: #d2d2d2;
}
p {
text-align: center;
}
conatiner {
max-width: 1024px;
margin: 0 auto;
}
#navbarContainer {
background: #F44336;
overflow: hidden;
width: 100%;
margin: 0;
}
.navbar {
float: left;
display: block;
font-family: 'Lato', sans-serif;
height: 40px;
width: 200px;
line-height: 40px;
text-align: center;
background: #F44336;
text-decoration: none;
color: #212121;
}
.navbar:hover {
background: #E57373;
color: white;
}
.active {
background: #C62828;
color: white;
}
#formContainer {
width: 450px;
background: #FDFFFC;
margin: 50px auto;
padding: 0px;
border-radius: 8px;
overflow: hidden;
}
#formContainer header {
width: 100%;
height: 130px;
background-color: #3cba54;
overflow: auto;
color: white;
}
header h1 {
margin: 35px 0 0 0;
text-align: center;
line-height: 30px;
}
header h3 {
line-height: 40px;
text-align: center;
margin: 0;
}
#heading {
background-color: #3cba54;
height: 40px;
color: white;
margin-bottom: 25px;
margin-left: -30px;
}
#heading h3 {
line-height: 40px;
}
form {
padding: 20px 0 0 20px;
text-align: center;
}
label {
display: inline-block;
width: 220px;
text-align: right;
}
#myForm .input_field {
margin-left: 20px;
margin-bottom: 10px;
font-size: 20px;
padding-left: 10px;
width: 125px;
height: 35px;
font-size: 17px;
border-radius: 3px;
background-color: #E0E0E0;
border: none;
}
#button {
display: block;
border-radius: 6px;
width: 200px;
height: 50px;
padding: 8px 15px 8px 15px;
margin: 0 auto;
margin-bottom: 50px;
font-size: 16px;
box-shadow: 0 6px #540000;
background-color: #FF3636;
border: none;
outline: none;
}
#button:active {
background-color: #B81B1B;
box-shadow: 0 1px #27496d;
transform: translateY(5px);
}
.highlight {
background: #FFEB3B !important;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="container">
<div id="navbarContainer">
<a class="navbar" id="62" href="https://s.codepen.io/awheat/debug/MpMrEo/yYAyLDjQWgKr">326 IAC 6-2 Tool</a>
<a class="navbar" id="63" href="https://s.codepen.io/awheat/debug/gWmazm/NQkzYnjeQZyA">326 IAC 6-3 Tool</a>
<a class="navbar active" id="voc" href="https://s.codepen.io/awheat/debug/qVpPNm/VGAWNnJYBjZr">VOC Conversion Tool</a>
</div>
<div id="formContainer">
<header>
<h1>VOC Conversion Tool</h1>
<h3>(for conversion of VOC data to other units)</h3>
</header>
<form id="myForm">
<label>Density of Coating (lbs/gal): </label><input type="text" id="density" class="input_field">
<label>Specific Graviy: </label><input type="text" id="sg" class="input_field">
<div id="heading">
<h3>VOC Content</h3>
</div>
<label>Pounds per Gallon (lbs/gal): </label><input type="text" id="pounds" class="input_field">
<label>Grams per Liter (g/L): </label><input type="text" id="grams" class="input_field">
<label>Percentage (%): </label><input type="text" id="percentage" class="input_field"><br><br>
<input type="button" id="button" value="Calculate" autofocus>
</form>
</div>
</div>
</body>
</html>

Sometimes putting script tags before the elements on the page can cause issues. You can try to put the scripts at the bottom of the body like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="navbarContainer">
<a class="navbar" id="62" href="https://s.codepen.io/awheat/debug/MpMrEo/yYAyLDjQWgKr">326 IAC 6-2 Tool</a>
<a class="navbar" id="63" href="https://s.codepen.io/awheat/debug/gWmazm/NQkzYnjeQZyA">326 IAC 6-3 Tool</a>
<a class="navbar active" id="voc" href="https://s.codepen.io/awheat/debug/qVpPNm/VGAWNnJYBjZr">VOC Conversion Tool</a>
</div>
<div id="formContainer">
<header>
<h1>VOC Conversion Tool</h1>
<h3>(for conversion of VOC data to other units)</h3>
</header>
<form id="myForm">
<label>Density of Coating (lbs/gal): </label><input type="text" id="density" class="input_field">
<label>Specific Graviy: </label><input type="text" id="sg" class="input_field">
<div id="heading">
<h3>VOC Content</h3>
</div>
<label>Pounds per Gallon (lbs/gal): </label><input type="text" id="pounds" class="input_field">
<label>Grams per Liter (g/L): </label><input type="text" id="grams" class="input_field">
<label>Percentage (%): </label><input type="text" id="percentage" class="input_field"><br><br>
<input type="button" id="button" value="Calculate" autofocus>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

Related

How would i align my image above everything else on the page?

I'm trying to get this image, which will end up being a logo, to appear above the table. Everything i have tried has just moved the image beside the other content rather than above it.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
main {
background-color: #1e1f1f;
display: inline-block;
padding: 25px;
font-size: 1.4rem;
font-family: Arial, Helvetica, sans-serif;
}
#myInput {
padding: 0;
margin: 0;
border: none;
width: 100%;
display: block;
font-size: 1.4rem;
text-align: center;
}
#myInput:focus {
outline:none;
text-align: center;
}
header label {
display:block;
text-align: center;
}
header strong {
box-sizing: border-box;
display: block;
padding: 15px 8px;
margin-bottom: 15px;
background: white;
width: 100%;
text-align: center;
}
main>div>div,
header div {
padding: 15px 18px;
background: white;
margin-bottom: 65px;
}
main>div>div {
margin: 25px 0;
padding: 15px 8px;
}
main>div>div>strong {
display: inline-block;
text-align:center;
}
output {
display: inline-block;
float: right;
text-align: right;
min-width: 10em;
}
output::before {
content: '£';
}
output::after {
clear: both;
content: '';
}
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
<body>
<main>
<header>
<img src="../Documents/RMS Logo - Oval.png" width="300" height="175" align="centre">
<label>
<strong>Enter NHS Price Below</strong>
<div>
<input id="myInput"/>
</div>
</label>
</header>
<div>
<div>
<strong>Retail:</strong>
<output id="output1" />
</div>
<div>
<strong>Schools & CDC's:</strong>
<output id="output2" />
</div>
<div>
<strong>Trade - Band A:</strong>
<output id="output3" />
</div>
<div>
<strong>Trade - Band B:</strong>
<output id="output4" />
</div>
<div>
<strong>Trade - Band C:</strong>
<output id="output5" />
</div>
<div>
<strong>Trade - Band D:</strong>
<output id="output6" />
</div>
</div>
</main>
<script type="text/javascript">
function byId(id) {
return document.getElementById(id)
}
window.addEventListener('load', onLoaded, false);
function onLoaded(evt) {
let input = byId('myInput');
input.addEventListener('input', onInputReceived, false);
}
function onInputReceived(evt) {
let outputs = [byId('output1'), byId('output2'), byId('output3'), byId('output4'), byId('output5'), byId('output6')];
let value = parseFloat(this.value);
if (!isNaN(value)) {
outputs[0].textContent = Math.ceil(value / 0.7);
outputs[1].textContent = Math.ceil(value * 1);
outputs[2].textContent = Math.ceil(value / 0.7 - (value / 0.7 / 100 * 40));
outputs[3].textContent = Math.ceil(value * 1);
outputs[4].textContent = Math.ceil(value / 0.7 - (value / 0.7 / 100 * 20));
outputs[5].textContent = Math.ceil(value / 0.7 - (value / 0.7 / 100 * 10));
} else {
outputs[0].textContent =
outputs[1].textContent =
outputs[2].textContent =
outputs[3].textContent =
outputs[4].textContent =
outputs[5].textContent = "*Please Enter a Number*";
}
}
</script>
</body>
</html>
I have tried aligning it to "top" and i cant find anything that makes it appear above, what would be the best and most simple way for me to move this image above?
Your HTML structure is wrong. The image shouldn't be inside the <head> tags. The head tag should be used for loading scripts for example. The <header> should not be repeated. I suggest to start by learning the basics of HTML structure here https://www.w3schools.com/html/html_intro.asp
That said, I've moved the image outside the head. I've placed the image inside the <header>. If you want to center the image, make the header 100% width, then apply display: block; to your image and margin: auto;.
See example below.
function byId(id) {
return document.getElementById(id)
}
window.addEventListener('load', onLoaded, false);
function onLoaded(evt) {
let input = byId('myInput');
input.addEventListener('input', onInputReceived, false);
}
function onInputReceived(evt) {
let outputs = [byId('output1'), byId('output2'), byId('output3'), byId('output4'), byId('output5'), byId('output6')];
let value = parseFloat(this.value);
if (!isNaN(value)) {
outputs[0].textContent = Math.ceil(value / 0.7);
outputs[1].textContent = Math.ceil(value * 1);
outputs[2].textContent = Math.ceil(value / 0.7 - (value / 0.7 / 100 * 40));
outputs[3].textContent = Math.ceil(value * 1);
outputs[4].textContent = Math.ceil(value / 0.7 - (value / 0.7 / 100 * 20));
outputs[5].textContent = Math.ceil(value / 0.7 - (value / 0.7 / 100 * 10));
} else {
outputs[0].textContent =
outputs[1].textContent =
outputs[2].textContent =
outputs[3].textContent =
outputs[4].textContent =
outputs[5].textContent = "*Please Enter a Number*";
}
}
header {
width: 100%;
}
header img {
display: block;
margin: auto;
}
main {
background-color: #1e1f1f;
display: inline-block;
padding: 25px;
font-size: 1.4rem;
font-family: Arial, Helvetica, sans-serif;
}
#myInput {
padding: 0;
margin: 0;
border: none;
width: 100%;
display: block;
font-size: 1.4rem;
text-align: center;
}
#myInput:focus {
outline: none;
text-align: center;
}
header label {
display: block;
text-align: center;
}
header strong {
box-sizing: border-box;
display: block;
padding: 15px 8px;
margin-bottom: 15px;
background: white;
width: 100%;
text-align: center;
}
main>div>div,
header div {
padding: 15px 18px;
background: white;
margin-bottom: 65px;
}
main>div>div {
margin: 25px 0;
padding: 15px 8px;
}
main>div>div>strong {
display: inline-block;
text-align: center;
}
output {
display: inline-block;
float: right;
text-align: right;
min-width: 10em;
}
output::before {
content: '£';
}
output::after {
clear: both;
content: '';
}
<!DOCTYPE html>
<html>
<head>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
</head>
<body>
<main>
<header>
<img src="../Documents/square.jpg" width="300" height="175" align="top">
</header>
<div>
<div>
<strong>Enter NHS Price Below</strong>
<input id="myInput" />
</div>
<div>
<strong>Retail:</strong>
<output id="output1" />
</div>
<div>
<strong>Schools & CDC's:</strong>
<output id="output2" />
</div>
<div>
<strong>Trade - Band A:</strong>
<output id="output3" />
</div>
<div>
<strong>Trade - Band B:</strong>
<output id="output4" />
</div>
<div>
<strong>Trade - Band C:</strong>
<output id="output5" />
</div>
<div>
<strong>Trade - Band D:</strong>
<output id="output6" />
</div>
</div>
</main>
</body>
</html>
You can place it within your header tag but before the label
<header>
<img src="../Documents/square.jpg" width="300" height="175" align="top" >
<label>
<strong>Enter NHS Price Below</strong>
<div>
<input id="myInput"/>
</div>
</label>
</header>
you can also place it before the main tag which might be a bad practice though you might need to create a menu/nav-bar containing the image link
<nav>
<img src="../Documents/square.jpg" width="300" height="175" align="top" >
</nav>
I removed the image and create a class called image-top and added backgroud image their . Is this the thing are u asking about?
<!DOCTYPE html>
<html>
<head>
<!-- <img class="image-t" src="../Documents/square.jpg" width="300" height="175" align="top" > -->
</head>
<style>
main {
background-color: #1e1f1f;
display: inline-block;
padding: 25px;
font-size: 1.4rem;
font-family: Arial, Helvetica, sans-serif;
}
.image-top{
height: 50vh;
background-image: url('https://www.hackingwithswift.com/uploads/matrix.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#myInput {
padding: 0;
margin: 0;
border: none;
width: 100%;
display: block;
font-size: 1.4rem;
text-align: center;
}
#myInput:focus {
outline:none;
text-align: center;
}
header label {
display:block;
text-align: center;
}
header strong {
box-sizing: border-box;
display: block;
padding: 15px 8px;
margin-bottom: 15px;
background: white;
width: 100%;
text-align: center;
}
main>div>div,
header div {
padding: 15px 18px;
background: white;
margin-bottom: 65px;
}
main>div>div {
margin: 25px 0;
padding: 15px 8px;
}
main>div>div>strong {
display: inline-block;
text-align:center;
}
output {
display: inline-block;
float: right;
text-align: right;
min-width: 10em;
}
output::before {
content: '£';
}
output::after {
clear: both;
content: '';
}
</style>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
<body>
<div class="image-top">
<p>img</p>
</div>
<main>
<header>
<label>
<strong>Enter NHS Price Below</strong>
<div>
<input id="myInput"/>
</div>
</label>
</header>
<div>
<div>
<strong>Retail:</strong>
<output id="output1" />
</div>
<div>
<strong>Schools & CDC's:</strong>
<output id="output2" />
</div>
<div>
<strong>Trade - Band A:</strong>
<output id="output3" />
</div>
<div>
<strong>Trade - Band B:</strong>
<output id="output4" />
</div>
<div>
<strong>Trade - Band C:</strong>
<output id="output5" />
</div>
<div>
<strong>Trade - Band D:</strong>
<output id="output6" />
</div>
</div>
</main>
<script type="text/javascript">
function byId(id) {
return document.getElementById(id)
}
window.addEventListener('load', onLoaded, false);
function onLoaded(evt) {
let input = byId('myInput');
input.addEventListener('input', onInputReceived, false);
}
function onInputReceived(evt) {
let outputs = [byId('output1'), byId('output2'), byId('output3'), byId('output4'), byId('output5'), byId('output6')];
let value = parseFloat(this.value);
if (!isNaN(value)) {
outputs[0].textContent = Math.ceil(value / 0.7);
outputs[1].textContent = Math.ceil(value * 1);
outputs[2].textContent = Math.ceil(value / 0.7 - (value / 0.7 / 100 * 40));
outputs[3].textContent = Math.ceil(value * 1);
outputs[4].textContent = Math.ceil(value / 0.7 - (value / 0.7 / 100 * 20));
outputs[5].textContent = Math.ceil(value / 0.7 - (value / 0.7 / 100 * 10));
} else {
outputs[0].textContent =
outputs[1].textContent =
outputs[2].textContent =
outputs[3].textContent =
outputs[4].textContent =
outputs[5].textContent = "*Please Enter a Number*";
}
}
</script>
</body>
</html>
To move something above something use position: relative or position: absolute and add z-index higher, than element after it.
E.g.:
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 10px;
top: 10px;
z-index: 1;
}
</style>
</head>
<body>
<img src="https://via.placeholder.com/150">
<p>Text after image Text after image Text after image Text after image Text after image Text after image Text after image</p>
</body>
</html>
If that not your question, sorry, I did not correctly understand :)

Password Generator does not work until I move slider

Problem: My password generator will not work until I move my slider. However, I would like the value to default to 8. So if someone loads page, and clicks generate PW, a random pw of 8 would populate.
//generate a password function
function passwordGenerator () {
// Length of the password?
var passwordLength = document.getElementById('num').value;
// characters options for PW
const values = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!##$%^&*()";
// defining password
var password = "";
// creating a loop to choose password
for (var i = 1; i <= passwordLength; i++) {
password = password + values.charAt(Math.floor(Math.random() * Math.floor(values.length -1)));
}
// adding the password to the content area
document.getElementById('display').value = password;
}
// adjust value when moving slider
function sliderMove(){
document.getElementById('num').value = document.getElementById('slider1').value;
document.getElementById('num').textContent = document.getElementById('num').value;
}
//copy to clipboard
function selectText() {
const input = document.getElementById('display');
input.focus();
input.select();
document.execCommand('copy')
}
.backgroundWhite {
background-color: white;
border: darkgray 2px solid;
padding-bottom: 25px;
}
.backgroundGray {
background-color: lightgray;
width: 100%;
height: 500%;
}
.passwordBox {
width: 500px;
height: 200px;
text-align: center;
}
body {
height: 100%;
background-color: lightgray;
}
.headText {
padding: 50px;
}
.buttonOnClick {
margin: 20px;
}
.passGenButton {
color: white;
background-color: red;
margin-right: 15%;
height: 40px;
border-radius: 12px;
}
.copyButton {
margin-left: 15%;
background-color: darkgray;
color: white;
height: 40px;
border-radius: 12px;
}
textarea {
padding: 20px;
font-size: 19px;
color: #4f4f4f;
}
.titleClass {
padding-top: 10px;
}
#media (max-width: 537px) {
.passGenButton {
color: white;
background-color: red;
margin-right: 1%;
height: 40px;
border-radius: 12px;
}
.copyButton {
margin-left: 1%;
background-color: darkgray;
color: white;
height: 40px;
border-radius: 12px;
}
.passwordBox {
width: 400px;
height: 200px;
text-align: center;
}
.backgroundWhite {
background-color: white;
border: darkgray 2px solid;
padding-bottom: 25px;
padding-left: 20px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="app.js"></script>
<title>Random Password Generator</title>
</head>
<body>
<div class="conatiner backgroundGray">
<div class="row">
<div class="col-12">
<div class="topText">
<!-- Header -->
<h1 class="text-center text-dark headText">Password Generator</h1>
</div>
<div class="container">
<div class='row'>
<div class="col-lg-12 col-sm-12 text-center">
<div class="content backgroundWhite">
<!-- Sub Header -->
<h4 class="titleClass">Generate a Password</h4>
<br />
<!-- Slider -->
<div class="slidecontainer">
<p>Select PW Length</p>
<input id="slider1" type="range" min="8" max="128" value="8" onchange="sliderMove()"
class="robClass">
<span id="num">8</span>
</div>
<br />
<!-- Password Box -->
<textarea class="passwordBox" type="text" id="display"
placeholder="Your Secure Password"></textarea>
<br />
<button onclick="passwordGenerator()" class="passGenButton buttonOnClick">Generate
Password</button>
<button class="buttonOnClick copyButton" defaultValue="8" onclick="selectText()">Copy to
clipboard</button>
<div id='length'></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have played with HTML and JS. I have tried to create a var num = 8;
no luck.
Does anyone have any ideas on how I can do this?
At the start of your passwordGenerator function:
var passwordLength = document.getElementById('num').value;
This element (<span id="num">8</span>) doesn't have a value attribute, so your function will try to generate a password with a length equal to undefined.
You should get the value from your slider instead:
var passwordLength = document.getElementById('slider1').value;
You can also simplify your function sliderMove function:
function sliderMove() {
document.getElementById('num').textContent = document.getElementById('slider1').value;
}

Appended items flow outside of div

I have a simple "dice" roller, where the user can choose how many sides and how many dice based on input.
My issue is that if the user selects a large number of dice, it will force the page to scroll left in order to view the other dice.
I have tried to keep these dice within a div , even trying word-wrap: break-word; within the css, but this stacks the dice on top of eachother.
heres my code.
$(document).ready(function() {
$('#autoLoadR').click(function() {
$('#buttnLodr').html("");
if ($('#sideNum').val() < 100) {
if ($('#diceNum').val() < 20) {
for (i = 0; i < $('#diceNum').val(); i++) {
let index = i + 1;
let roll = index;
sidesAmount = $('#sideNum').val();
roll = Math.floor(Math.random() * sidesAmount) + 1;
$('#buttnLodr').append("<span id='diceBox'>" + roll + "</span>")
}
} else {
alert("Please enter a number for less than 20 for number of dice")
}
} else {
alert("Please enter a number less than 100 for number of sides")
}
});
});
body {
background: #add8e6;
margin-left: 2%;
margin-top: 2%;
width: 500px;
}
#spaceR {
color: lightblue;
}
.rollMeNow {
display: block;
color: #fff;
cursor: pointer;
border: 1px solid #d7d7d7;
font-size: 72px;
height: 156px;
line-height: 156px;
width: 256px;
background: #df1f3b;
border-radius: 4px;
text-align: center;
}
#optionDice {
border: solid;
width: 100%;
}
#diceBox {
border: solid;
padding: 7px 14px;
box-shadow: 10px 5px;
margin: 2%;
}
#rollTable {
width: 100%;
background: #fff;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://aaronlilly.github.io/CDN/css/bootstrap.min.css">
<div id="optionDice">
<h1>Number of Dice :
<span id='spaceR'> :</span>
<input type="text" id="diceNum" placeholder="Dice" size="5" style="margin-top: 10px;padding-bottom: 5px;padding-top: 4px;">
</h1>
<h1>Number of Sides :
<input type="text" id="sideNum" placeholder="Sides" size="5" style="margin-top: 10px;padding-bottom: 5px;padding-top: 4px;">
</h1>
</div>
<br><br>
<div class="rollMeNow" caption="Populate" id="autoLoadR">Roll</div>
<br>
<h1>
<div id='rollTable'>
<br>
<div class="container">
<div class="row">
<!-- <div class="col-sm"> -->
<div id='buttnLodr'> </div>
</div>
</div>
</div>
</div>
</h1>
#diceBox {
// ...
display: inline-block;
}
Also, some other suggestions:
you have some implicitly declared variables (i in your for loop and sidesAmount in that loop)
use const instead of let whenever you are not re-asigning a variable
why looping from 0, then add 1 and then store it to another variable. And then you overwrite that variable with Math.floor
try to avoid selecting DOM elements (event if its only single) by IDs. Always use class.

Getting text input from <form> to use in JS function to display on page

So I am trying to get the user to input two numbers, then click a button to run a JS function and display the result on the page. However, when I run the code, it spits back
NaN
How do I solve this problem? Is there a way I can get the tip to display on the web page?
My HTML:
<!DOCTYPE html>
<html>
<head>
<title> Tip Calculator by Jonah </title>
<div id = "links">
<script src = "functions.js"></script>
<link type = "text/css" rel = stylesheet href = "design.css">
<link href="https://fonts.googleapis.com/css?family=Bitter" rel="stylesheet">
</div>
</head>
<body>
<div id = "cool_main">
<h1 id = "title"> Tip Calculator </h1>
<h2 id = "developer"> Developed by Jonah Johnson </h2>
</div>
<p id = "main_para"><b> Enter the meal cost then a tax percentage,and hit OK!</b></p>
<form id = "meal_cost">
Meal Total Here :<br>
<input type="text" id = "meal__cost" name="mealcost" /><br>
</form>
<form id = "tax_percent">
Tax Here (in percent) :<br>
<input type ="text" id = "tax_per" name="taxpercent" ><br>
</form>
<h4 id = "per"> % </h4>
<button id = "getTip" onclick = "addTogether()"> OK </button>
</body>
</html>
My JS:
var taxValue = document.getElementById("tax_per").value;
var meal__Cost = document.getElementById("meal__cost").value;
function addTogether() {
document.write(taxValue * meal__cost);
}
My CSS:
div {
position: relative;
left: -490px;
}
#title {
font-family: "Bitter", sans-serif;
border: 0px solid black;
width: 225px;
padding: 10px 24px;
background-color: #dbdbcb;
border-radius: 4px;
box-shadow: 10px 10px 5px #888888;
position: relative;
left: 531px;
font-size: 40px;
text-align: center;
}
#developer {
font-family: "Bitter", sans-serif;
border: 0px solid black;
width: 300px;
padding : 5px 10px;
text-align: center;
background-color: #dbdbcb;
border-radius: 10px 10px;
box-shadow: 10px 10px 5px #888888;
position: relative;
left: 510px;
}
#main_para {
border: 1px solid black;
width: 415px;
position: relative;
left: 0px;
font-family: "Bitter", sans-serif;
padding: 4px 10px;
background-color: #dbdbcb;
border-radius: 10px 10px;
}
#meal_cost {
border: 0px solid black;
width: 400px;
height: 100px;
padding: 10px 10px;
text-align: center;
font-family: "Bitter", sans-serif;
background-color: #dbdbcb;
box-shadow: 10px 10px 5px #888888;
position: relative;
left: 550px;
bottom: 200px;
font-size: 40px;
}
#tax_percent {
border: 0px solid black;
width: 400px;
padding: 10px 10px;
text-align: center;
font-family: "Bitter", sans-serif;
font-size: 40px;
background-color: #dbdbcb;
position: relative;
box-shadow: 10px 10px 5px #888888;
left: 550px;
bottom: 170px;
}
#per {
position: relative;
left: 856px;
bottom: 226px;
width: 10px;
font-family: "Bitter", sans-serif;
}
Any help would be appreciated. It would also be good if the displayed value was customizable in css.
function addTogether() {
var taxValue = parseInt(document.getElementById("tax_per").value);
var meal__Cost = parseInt(document.getElementById("meal__cost").value);
document.write(taxValue * meal__Cost);
}
<div id = "cool_main">
<h1 id = "title"> Tip Calculator </h1>
<h2 id = "developer"> Developed by Jonah Johnson </h2>
</div>
<p id = "main_para"><b> Enter the meal cost then a tax percentage,and hit OK!</b></p>
<form id = "meal_cost">
Meal Total Here :<br>
<input type="text" id = "meal__cost" name="mealcost" /><br>
</form>
<form id = "tax_percent">
Tax Here (in percent) :<br>
<input type ="text" id = "tax_per" name="taxpercent" ><br>
</form>
<h4 id = "per"> % </h4>
<button id = "getTip" onclick = "addTogether()"> OK </button>
You need to parse it into Integer or Float, as the data you are manipulating is string
var taxValue = parseInt(document.getElementById("tax_per").value);
var meal__Cost = parseInt(document.getElementById("meal__cost").value);
You can use parseFloat as well if you reuire
You wrong with variable name case and you must retrieve the value when user clicks the button:
<!DOCTYPE html>
<html>
<head>
<title> Tip Calculator by Jonah </title>
</head>
<body>
<div id = "cool_main">
<h1 id = "title"> Tip Calculator </h1>
<h2 id = "developer"> Developed by Jonah Johnson </h2>
</div>
<p id = "main_para"><b> Enter the meal cost then a tax percentage,and hit OK!</b></p>
<form id = "meal_cost">
Meal Total Here :<br>
<input type="text" id = "meal__cost" name="mealcost" value="0" /><br>
</form>
<form id = "tax_percent">
Tax Here (in percent) :<br>
<input type ="text" id = "tax_per" name="taxpercent" value="0"><br>
</form>
<h4 id = "per"> % </h4>
<button id = "getTip" onclick = "addTogether(); return false;"> OK </button>
<div id = "links">
</div>
<script >
function addTogether() {
var taxValue = parseFloat(document.getElementById("tax_per").value);
var meal__cost = parseFloat(document.getElementById("meal__cost").value);
document.getElementById("links").innerHTML= taxValue * meal__cost;
return false;
}
</script>
</body>
</html>

Trying to get $(document).on('Click') to work for a p tag

I am trying to get my document.on function to work when the user clicks on the p tag that has a class called card. So far the function is non responsive. What should I change so the function will respond when I click on the p tag that has a class called card. Here is my HTML and JQuery code.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Contacts">
<title>Contacts</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
var first = $('input.first').val();
var last = $('input.last').val();
var desc = $('textarea').val();
$('div.right').append("<p class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4></p><p class='back'>"+desc+"</p>");
return false;
});
$(document).on('click', 'p.card', function(){ //this is the function I am trying to get to work.
alert("test");
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="left">
<form action="#">
<p >First name: <input type="text" name="fname" class="first"></p>
<p >Last name: <input type="text" name="lname" class="last"></p>
<p class="desc">Description:</p>
<p><textarea rows="4" cols="50"></textarea></p>
<button>Add User</button>
</form>
</div>
<div class="right">
</div>
</div>
</body>
Here is my css code
*{
/* outline: 2px dotted red;*/
border: 0 none;
padding: 0;
margin: 0;
}
div.wrapper{
width: 970px;
min-height: 100px;
margin-left: auto;
margin-right: auto;
}
div.left{
border: 2px solid black;
width: 500px;
display: inline-block;
}
div.right{
width: 200px;
display: inline-block;
height: 100px;
vertical-align: top;
padding-right: 100px;
text-align: center;
}
p{
margin-left: 80px;
margin-top: 20px;
font-size: 20px;
width: 400px;
}
p.email{
margin-left: 45px;
}
button{
margin: 30px;
height: 20px;
width: 100px;
margin-left: 75px;
text-align: center;
}
div.card{
margin-left: 100px;
margin-bottom: 20px;
border: 2px solid black;
width: 300px;
height: 100px;
text-align: center;
}
p.back{
display: none;
margin: 0px;
padding: 0px;
text-align: center;
}
textarea{
border: 2px solid black;
}
Somehow the p.class you were appending was broken, it was below the other elements and was not being identified as the sender by jQuery event.
The following works fine:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="Contacts">
<title>Contacts</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('button').click(function(){
var first = $('input.first').val();
var last = $('input.last').val();
var desc = $('textarea').val();
var p = $('<p class="card">');
p.append("<h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4><p class='back'>"+desc+"</p>");
$('div.right').append(p);
return false;
});
$(document).on('click', 'p.card', function(){ //this is the function I am trying to get to work.
alert("test");
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="left">
<form action="#">
<p >First name: <input type="text" name="fname" class="first"></p>
<p >Last name: <input type="text" name="lname" class="last"></p>
<p class="desc">Description:</p>
<p><textarea rows="4" cols="50"></textarea></p>
<button>Add User</button>
</form>
</div>
<div class="right">
</div>
</div>
</body>
your code were not right , the appending elements not formatted as your wish , thats why the click function not working, check the below snippt i have fixed your code, hope fully this will help you
$(document).ready(function(){
$('button').click(function(){
var first = $('input.first').val();
var last = $('input.last').val();
var desc = $('textarea').val();
$('div.right').append('<p class="card"></p>');
$('.card').html("<h1> first +' '+last</h1><h4>Click for description!'</h4><p class='back'>+desc+</p>"
);
});
$(document).on('click', 'p.card', function(){ //this is the function I am trying to get to work.
alert("test");
});
});
* {
/* outline: 2px dotted red;*/
border: 0 none;
padding: 0;
margin: 0;
}
div.wrapper {
width: 970px;
min-height: 100px;
margin-left: auto;
margin-right: auto;
}
div.left {
border: 2px solid black;
width: 500px;
display: inline-block;
}
div.right {
width: 200px;
display: inline-block;
height: 100px;
vertical-align: top;
padding-right: 100px;
text-align: center;
}
p {
margin-left: 80px;
margin-top: 20px;
font-size: 20px;
width: 400px;
}
p.email {
margin-left: 45px;
}
button {
margin: 30px;
height: 20px;
width: 100px;
margin-left: 75px;
text-align: center;
}
div.card {
margin-left: 100px;
margin-bottom: 20px;
border: 2px solid black;
width: 300px;
height: 100px;
text-align: center;
}
p.back {
display: none;
margin: 0px;
padding: 0px;
text-align: center;
}
textarea {
border: 2px solid black;
}
<div class="wrapper">
<div class="left">
<form action="#">
<p >First name:
<input type="text" name="fname" class="first">
</p>
<p >Last name:
<input type="text" name="lname" class="last">
</p>
<p class="desc">Description:</p>
<p>
<textarea rows="4" cols="50"></textarea>
</p>
<button>Add User</button>
</form>
</div>
<div class="right"> </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
looks like You're misusing the header tags.
I tried your DOM structure, and what's happening is that when Firefox/Chrome sees an invalid <h1> tag inside the <p>, it automatically closes the <p> tag. You can clearly see this in Developer Tools.
You should use <span> tags instead of header tags, check this it Works here
JS CODE:
$('div.right')
.append('<p class="card"><span>'+first+'<==>'+last+'</span>Click for Description!!!</p>');
Using developer tools inpsection, you'll see your added html is
<p class="card"></p><h1> </h1><h4>'Click for description!'</h4><p></p><p class="back"></p>`
No matter what I've tried, I can't get Firefox to create insert that html as you want it!! it's like it doesn't want to put h1/h4 inside a p so decides to close the p early!
change to
$('div.right').append("<div class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4></div><p class='back'>"+desc+"</p>");
and it all goes good - indeed, it's odd, that you already have css for div.card, but not p.card!!
You could do it in Javascript and impliment jquery in the function:
var div = document.getElementById('someid');
function foo(e) {
//Jquery Here
}
div.addEventListener('click', foo);
This is what I use for a lot of my functions.
Wrap card with <div/> instead of <p/> and it should work. As you have other block elements inside <p/>. It's breaking your html.
$('div.right').append("<div class='card'><h1>"+ first +' '+last+"</h1><h4>'Click for description!'</h4><p class='back'>"+desc+"</p></div>");
And then change 'p.card' to 'div.card'.

Categories