The Code is not generating a file for cookie in browser

The Code is not generating a file for cookie in browser - javascript

I have a html and Javascript code which sets a cookie and fetches from a cookie. I copied the code for JS and wrote the code for HTML , but I am unable to get the cookie. Here is my code
<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) { // sets the cookie
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var user=getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
<!--user = prompt("Please enter your name:","");-->
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}
</script>
<style> // CSS details for login page creation .
html, body {
width: 100%;
height: 100%;
font-family: "Helvetica Neue", Helvetica, sans-serif;
color: #444;
-webkit-font-smoothing: antialiased;
background-image: url("bg.jpg");
}
#container {
position: fixed;
width: 500px;
height: 395px;
top: 25%;
left: 30%;
margin-top: -5px;
margin-left: -200x;
background: #fff;
border-radius: 30px;
border: 1px solid #ccc;
box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
form {
margin: 0 auto;
margin-top: 20px;
}
label {
color: #555;
display: inline-block;
margin-left: 18px;
padding-top: 10px;
font-size: 14px;
}
p a {
font-size: 11px;
color: #aaa;
float: right;
margin-top: -13px;
margin-right: 20px;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
transition: all .4s ease;
}
p a:hover {
color: #555;
}
input {
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 12px;
outline: none;
}
input[type=text],
input[type=password] {
color: #777;
padding-left: 10px;
margin: 10px;
margin-top: 12px;
margin-left: 18px;
width: 290px;
height: 35px;
border: 1px solid #c7d0d2;
border-radius: 2px;
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
transition: all .4s ease;
}
input[type=text]:hover,
input[type=password]:hover {
border: 1px solid #b6bfc0;
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8;
}
input[type=text]:focus,
input[type=password]:focus {
border: 1px solid #a8c9e4;
box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9;
}
#lower {
background: #ecf2f5;
width: 100%;
height: 69px;
margin-top: 20px;
box-shadow: inset 0 1px 1px #fff;
border-top: 1px solid #ccc;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
input[type=checkbox] {
margin-left: 20px;
margin-top: 30px;
}
.check {
margin-left: 3px;
font-size: 11px;
color: #444;
text-shadow: 0 1px 0 #fff;
}
input[type=submit] {
float: right;
margin-right: 20px;
margin-top: 20px;
width: 80px;
height: 30px;
font-size: 14px;
font-weight: bold;
color: #fff;
background-color: #acd6ef; /*IE fallback*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#acd6ef), to(#6ec2e8));
background-image: -moz-linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
background-image: linear-gradient(top left 90deg, #acd6ef 0%, #6ec2e8 100%);
border-radius: 30px;
border: 1px solid #66add6;
box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5);
cursor: pointer;
}
input[type=submit]:hover {
background-image: -webkit-gradient(linear, left top, left bottom, from(#b6e2ff), to(#6ec2e8));
background-image: -moz-linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
background-image: linear-gradient(top left 90deg, #b6e2ff 0%, #6ec2e8 100%);
}
#imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.infosys {
width: 50%;
}
</style>
</head>
<body>
<form method = "post">
<div id="container">
<div id="imgcontainer">
<img src="pic.png" alt="pic Logo" class="pic" >
</div>
<br/>
<label for="username">Username:</label>
<input type="text" id="username" name="username" >
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<div id="lower">
<input type="checkbox"><label class="check" for="checkbox">Keep me logged in</label>
<input type="submit" value="Login" onClick="checkCookie()">
</div>
</form>
</div>
</body>
</html>
How do I know if the username is stored successfully? Please do let me know , what mistake I'm doing and where I am going wrong.

You are having 2 issues in your code. #camen6ert mentioned one of the issue and the second issue is that you are passing user variable to the setCookie() function which is empty and However, the cookie name should not be empty.
You need to replace your this part of your code:
if (user != "" && user != null) {
setCookie("username", user, 30);
}
with this one:
if (user != "" || user != null) {
setCookie("username", document.getElementById("username").value, 30);
}
Hope, it works for you.

There are a bunch of issues here that I will try to address:
<!-- --> is an HTML comment - this is not how you comment out JS code, and results in a fatal syntax error. so <!--user = prompt("Please enter your name:","");--> should be // user = prompt("Please enter your name:",""); if you want to comment out that line.
Since you commented out this line, the value of the variable user never gets set, and the if statement that follows it never evaulates to true and executes, since the variable is indeed equal to "". Either uncomment this line, or see note at bottom about fetch username value.
You are using "onClick" when you should be using "onclick" - it should be <input type="submit" value="Login" onclick="checkCookie()">
If you are trying to grab the username value from the form and save it into the cookie, you need to add code to that. Like:
function checkCookie() {
var user=getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = document.getElementById("username").value;
if (user != "" && user != null) {
setCookie("username", user, 30);
}
}
}
Furthermore, if you are trying to interact with a form before it is submitted, you are much better off attaching your function to the form's onsubmit event.

Related

Open a multiple modal automatically

I have a multiple modal with next/previous buttons. I want my modal to open automatically as soon as the page loads.
For now I have to press the "Open modal" button, I want to remove that button.
I appreciate the help
Open the modal as soon as the page loads
Remove the "Open modal" button
The modal is multiple
$(document).ready(function() {
var data = [];
currentModal = 0;
$('.modalDialog').each(function() {
data.push({
id: $(this).attr('id'),
order: $(this).data('modalorder')
});
})
$('#openModalBtn').click(function() {
currentModal = 0;
window.location.href = "#" + data[currentModal].id;
$('#' + data[currentModal].id).find('.getAssignment2').prop('disabled', true);
})
// prev
$('.getAssignment2').click(function() {
if (currentModal > 0) {
currentModal--;
window.location.href = "#" + data[currentModal].id;
} else {
window.location.href = '#'
}
})
// next
$('.getAssignment').click(function() {
if (currentModal < data.length - 1) {
currentModal++;
if (currentModal === data.length - 1)
$('#' + data[currentModal].id).find('.getAssignment').prop('disabled', true);
window.location.href = "#" + data[currentModal].id;
} else {
window.location.href = '#'
}
})
})
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
.modalDialog>div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px;
border-radius: 10px;
background: #fff;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
.getAssignment {
cursor: pointer;
background: linear-gradient(to left, #ffa400 0%, #ffa400 0%, #ff5f00f0 75%) !important;
border: none;
border-radius: 25px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 5px 30px;
margin-top: 10px;
}
.getAssignment:hover {
background: linear-gradient(to left, #90d2fb 0%, #0891d2 0%, #09629b 55%) !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input type="button" id="openModalBtn" value="Open Modal">
<div id="openModal1" class="modalDialog" data-modalorder="1">
<div>
X
<h3 style="text-align: center; font-weight: 600;">Hello</h3>
<p style="text-align: center;">Answer the questions</p>
<center>
<input class="getAssignment" type="button" value="Iniciar">
</center>
</div>
</div>
<div id="openModal2" class="modalDialog" data-modalorder="2">
<div>
X
<h3 style="text-align: center; font-weight: 600;">Birthday</h3>
<center>
<input type="date" id="birthday" name="birthday">
<br>
<input class="getAssignment" type="button" value="Siguiente">
</center>
</div>
</div>
<div id="openModal3" class="modalDialog" data-modalorder="3">
<div>
X
<h2 style="text-align: center; font-weight: 600;">Gender</h2>
<center>
<select name="work_days" id="id_work_days" multiple>
<option value="hombre">Man</option>
<option value="mujer">Women</option>
</select>
<input class="getAssignment" type="button" value="Siguiente">
</center>
</div>
</div>

Move your open modal code into a separate named function, so that you can use it in 2 places
call directly in the document ready function
register it to the click handler
$(document).ready(function() {
var data = [];
currentModal = 0;
$('.modalDialog').each(function() {
data.push({
id: $(this).attr('id'),
order: $(this).data('modalorder')
});
// call open modal on document ready
openModal();
})
// register the named function to the click handler
$('#openModalBtn').click((event)=>openModal());
// moved to a separate named function, so it can be called directly
function openModal(){
currentModal = 0;
window.location.href = "#" + data[currentModal].id;
$('#' + data[currentModal].id).find('.getAssignment2').prop('disabled', true);
}
// prev
$('.getAssignment2').click(function() {
if (currentModal > 0) {
currentModal--;
window.location.href = "#" + data[currentModal].id;
} else {
window.location.href = '#'
}
})
// next
$('.getAssignment').click(function() {
if (currentModal < data.length - 1) {
currentModal++;
if (currentModal === data.length - 1)
$('#' + data[currentModal].id).find('.getAssignment').prop('disabled', true);
window.location.href = "#" + data[currentModal].id;
} else {
window.location.href = '#'
}
})
})
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity: 0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity: 1;
pointer-events: auto;
}
.modalDialog>div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px;
border-radius: 10px;
background: #fff;
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
.getAssignment {
cursor: pointer;
background: linear-gradient(to left, #ffa400 0%, #ffa400 0%, #ff5f00f0 75%) !important;
border: none;
border-radius: 25px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
padding: 5px 30px;
margin-top: 10px;
}
.getAssignment:hover {
background: linear-gradient(to left, #90d2fb 0%, #0891d2 0%, #09629b 55%) !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<input type="button" id="openModalBtn" value="Open Modal">
<div id="openModal1" class="modalDialog" data-modalorder="1">
<div>
X
<h3 style="text-align: center; font-weight: 600;">Hello</h3>
<p style="text-align: center;">Answer the questions</p>
<center>
<input class="getAssignment" type="button" value="Iniciar">
</center>
</div>
</div>
<div id="openModal2" class="modalDialog" data-modalorder="2">
<div>
X
<h3 style="text-align: center; font-weight: 600;">Birthday</h3>
<center>
<input type="date" id="birthday" name="birthday">
<br>
<input class="getAssignment" type="button" value="Siguiente">
</center>
</div>
</div>
<div id="openModal3" class="modalDialog" data-modalorder="3">
<div>
X
<h2 style="text-align: center; font-weight: 600;">Gender</h2>
<center>
<select name="work_days" id="id_work_days" multiple>
<option value="hombre">Man</option>
<option value="mujer">Women</option>
</select>
<input class="getAssignment" type="button" value="Siguiente">
</center>
</div>
</div>

How do I get a prompt box to send data to a chat box?

How do I get a prompt box to send data to a chat box?
I've been trying to get my chat box to receive data from a prompt then a person's message, but if I do send a message it will say that person is undefined and then the person's message.
/*Chat box*/
#chatbox {
background-position: 10px 10px;
-webkit-transition: width 0.5s ease-in-out;
background-repeat: no-repeat;
background-color: white;
box-sizing: border-box;
font-size: 16px;
display: table;
padding: 10px 20px 12px 15px;
border: 1px solid #cccccc;
height: 40.8em;
width: 52em;
}
/*Chatbox inside border*/
.chatboxborder {
background-position: 10px 10px;
-webkit-transition: width 0.5s ease-in-out;
background-repeat: no-repeat;
background-color: white;
vertical-align: bottom;
overflow-y: scroll;
transition: width 0.5s ease-in-out;
box-sizing: border-box;
font-size: 16px;
display: table-cell;
padding: 10px 20px 12px 15px;
height: 2.8em;
border: 1px solid #cccccc;
width: 20em;
}
/*Chat message*/
#chatspace {
transition-duration: 5s;
background-color: #ECECEC;
position: fixed;
z-index: 4;
bottom: 0px;
height: 20px;
border: 1px solid #000;
right: 240px;
left: 20px;
}
#chatbox p {
transition-duration: 5s;
-moz-border-radius: 4px;
background: #E6E6E6;
padding: 1em;
margin: auto;
border: 1px solid #BDBDBD;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxtwo">
<script>
//Your username is asked when a user opens the window //
window.addEventListener('load',
function() {
var person = prompt("Enter your username");
if (person != null) {
document.getElementById("username").innerHTML =
"Welcome, " + person + ".";
// If the prompt is empty, anoterh appears //
while (person == "" || person == null) {
person = prompt("Your username can't be empty!", "");
document.getElementById("username").innerHTML =
"Welcome, " + person + ".";
}
}
}, false);
</script>
<p id="username"></p>
<br>
<br>
</div>
<div class="container">
<div id="chatbox">
<div class="chatboxborder" id="chatboxborder">
</div>
</div>
</div>
<div class="fixed" id="boxfive">
<script>
// The message is showed in the chatbox //
$(document).ready(function() {
$('#submitmsg').click(function() {
var message = $('#usermsg').val();
$('#chatboxborder').append('<p id="username">' + ' says: ' + message + '</p id="username">' + '<br>');
$('#usermsg').val('');
});
});
</script>
<form name="message">
<input style="width: 83%" name="usermsg" type="text" id="usermsg" size="63" placeholder="Say something">
<button type="button" id="submitmsg" value="Send">Submit</button>
</form>
</div>

Just to add some explanation as to why this fixes the problem, the original code was storing the user's name in a local variable inside the event listener callback. Trying to use that variable outside the callback scope would result in undefined because it didn't exist there.
You can just store the persons name in a global variable and use it when they send a message. Example in the snippet.
//Your username is asked when a user opens the window //
var name
window.addEventListener('load',
function() {
var person = prompt("Enter your username");
if (person != null) {
document.getElementById("username").innerHTML =
"Welcome, " + person + ".";
name = person
// If the prompt is empty, anoterh appears //
while (person == "" || person == null) {
person = prompt("Your username can't be empty!", "");
document.getElementById("username").innerHTML =
"Welcome, " + person + ".";
}
}
}, false);
// The message is showed in the chatbox //
$(document).ready(function() {
$('#submitmsg').click(function() {
var message = $('#usermsg').val();
$('#chatboxborder').append('<p id="username">' + name + ' says: ' + message + '</p>' + '<br>');
$('#usermsg').val('');
});
});
/*Chat box*/
#chatbox {
background-position: 10px 10px;
-webkit-transition: width 0.5s ease-in-out;
background-repeat: no-repeat;
background-color: white;
box-sizing: border-box;
font-size: 16px;
display: table;
padding: 10px 20px 12px 15px;
border: 1px solid #cccccc;
height: 40.8em;
width: 52em;
}
/*Chatbox inside border*/
.chatboxborder {
background-position: 10px 10px;
-webkit-transition: width 0.5s ease-in-out;
background-repeat: no-repeat;
background-color: white;
vertical-align: bottom;
overflow-y: scroll;
transition: width 0.5s ease-in-out;
box-sizing: border-box;
font-size: 16px;
display: table-cell;
padding: 10px 20px 12px 15px;
height: 2.8em;
border: 1px solid #cccccc;
width: 20em;
}
/*Chat message*/
#chatspace {
transition-duration: 5s;
background-color: #ECECEC;
position: fixed;
z-index: 4;
bottom: 0px;
height: 20px;
border: 1px solid #000;
right: 240px;
left: 20px;
}
#chatbox p {
transition-duration: 5s;
-moz-border-radius: 4px;
background: #E6E6E6;
padding: 1em;
margin: auto;
border: 1px solid #BDBDBD;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxtwo">
<p id="username"></p>
<br>
<br>
</div>
<div class="container">
<div id="chatbox">
<div class="chatboxborder" id="chatboxborder">
</div>
</div>
</div>
<div class="fixed" id="boxfive">
<form name="message">
<input style="width: 83%" name="usermsg" type="text" id="usermsg" size="63" placeholder="Say something">
<button type="button" id="submitmsg" value="Send">Submit</button>
</form>
</div>

If the difference between the input and the variable is over 30 or over then the text for #feedback should be .

I am a newbie working on an assignment. I need to compare a variable to an input. If the difference between the randomNumber variable and the input is 30 or greater then I want the text for #feedback to be "very cold".
Example 1: randomNumber = 50 and input value = 20 then #feedback should be "very cold"
Example 2: randomNumber = 50 and input value = 90 then #feedback should be "very cold"
$(document).ready(function(){
var randomNumber = 0;
var userGuess = 0;
var guessCount = 0;
//generates number
function randomNumberGenerator() {
randomNumber = Math.floor(Math.floor(Math.random()*100));
console.log("random number= " + randomNumber);
}
randomNumberGenerator();
//starts new game
function newGame(){
guessCount = 0;
randomNumber = (Math.floor(Math.random()*100));
console.log("new number is " + randomNumber);
}
//user guess
function compareGuess(){
if ($("#userGuess").val() == randomNumber) {
$('#feedback').text('You Win!');
}
}
//sets number of counts
function setCount(count){
$('#count').text(guessCount);
}
//submit
$('#guessButton').click(function() {
compareGuess();
});
//click for new game
$( ".new" ).click(function() {
newGame();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="game"> <!-- Guessing Section -->
<h2 id="feedback">Make your Guess!</h2>
<form>
<input type="text"
name="userGuess"
id="userGuess"
class="text"
maxlength="3"
autocomplete="off"
placeholder="Enter your Guess"
required/>
<input type="button"
id="guessButton"
class="button"
name="submit"
value="Guess"/>
</form>
<p>
Guess #<span id="count">0</span>!
</p>
<ul id="guessList" class="guessBox clearfix">
</ul>
</section>
JS Fidde: https://jsfiddle.net/jelane20/w8jxqjem/6/
Please let me know if I need to provide any more information, thank you!

You just need this code in your compareGuess()
if(input > randomNumber)
{
if((input - randomNumber) > 30)
{
$("#feedback").text("Very cold!");
}
}
FIDDLE
SNIPPET
$(document).ready(function() {
var randomNumber = 0;
var userGuess = 0;
var guessCount = 0;
//generates number
function randomNumberGenerator() {
randomNumber = Math.floor(Math.floor(Math.random() * 100));
console.log("random number= " + randomNumber);
}
randomNumberGenerator();
//starts new game
function newGame() {
guessCount = 0;
randomNumber = (Math.floor(Math.random() * 100));
console.log("new number is " + randomNumber);
}
//user guess
function compareGuess() {
console.log("Guessing");
var input = parseInt($("#userGuess").val());
if (input == randomNumber) {
$('#feedback').text('You Win!');
}
if (input > randomNumber) {
if ((input - randomNumber) >= 30) {
$("#feedback").text("Very cold!");
}
}
}
//sets number of counts
function setCount(count) {
$('#count').text(guessCount);
}
//submit
$('#guessButton').click(function() {
compareGuess();
});
//click for new game
$(".new").click(function() {
newGame();
});
});
$(document).ready(function() {
/*--- Display information modal box ---*/
$(".what").click(function() {
$(".overlay").fadeIn(1000);
});
/*--- Hide information modal box ---*/
$("a.close").click(function() {
$(".overlay").fadeOut(1000);
});
});
/*---------------------------------------------------------------------------------
Common Styles
---------------------------------------------------------------------------------*/
/*float styles*/
.clearfix:before,
.clearfix:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.clearfix:after {
clear: both;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
width: 100%;
height: 100%;
background-color: #394264;
}
body {
position: relative;
width: 98%;
height: 96%;
margin: 0.8em auto;
font-family: 'Lato', Calibri, Arial, sans-serif;
background-color: #1F253D;
text-align: center;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}
a {
text-decoration: none;
color: black;
}
ul li {
display: inline;
}
/*---------------------------------------------------------------------------------
Header Styles
---------------------------------------------------------------------------------*/
nav {
position: relative;
height: 10%;
padding: 1em;
}
nav ul li {
text-transform: uppercase;
font-weight: 700;
font-size: 1.2em;
}
nav ul li:first-child {
float: left;
}
nav ul li:last-child {
float: right;
}
nav a {
color: #fff;
}
h1 {
font-weight: 900;
font-size: 3em;
padding: 0.8em;
color: #fff;
}
/*style for hidden modal*/
.overlay {
width: 100%;
height: 100%;
color: #fff;
background: #e74c3c;
position: absolute;
top: 0;
left: 0;
margin: 0;
z-index: 1000;
display: none;
}
.content {
color: #fff;
background: #e74c3c;
position: relative;
height: auto;
width: 600px;
border-radius: 3px;
top: 15%;
margin: auto auto;
border: 1px solid rgba(0, 0, 0, 0.1);
}
.content h3 {
margin: 0;
padding: 0.4em;
text-align: center;
font-size: 2.4em;
font-weight: 300;
opacity: 0.8;
background: rgba(0, 0, 0, 0.1);
border-radius: 3px 3px 0 0;
}
.content > div {
padding: 15px 40px 30px;
margin: 0;
font-weight: 300;
font-size: 1.15em;
}
.content > div p {
margin: 0;
padding: 10px 0;
line-height: 2em;
text-align: justify;
}
.content > div ul {
margin-bottom: -30px;
padding: 0 0 30px 20px;
text-align: left;
}
.content > div ul li {
padding: 5px 0;
display: block;
list-style-type: disc;
line-height: 1.5em;
}
.content > div ul li strong {
text-decoration: underline;
}
.content > div a {
font-size: 0.8em;
background: #1F253D;
color: #95a5a6;
padding: 0.5em 2em;
margin-bottom: 50px;
border-radius: 3px;
}
/*---------------------------------------------------------------------------------
Game Section Styles
---------------------------------------------------------------------------------*/
.game {
position: relative;
background-color: #394264;
width: 380px;
height: 380px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin: 0 auto;
box-shadow: rgb(26, 31, 52) 1px 1px, rgb(26, 31, 52) 2px 2px, rgb(26, 31, 52) 3px 3px, rgb(26, 31, 53) 4px 4px, rgb(26, 32, 53) 5px 5px, rgb(27, 32, 53) 6px 6px, rgb(27, 32, 54) 7px 7px, rgb(27, 32, 54) 8px 8px, rgb(27, 32, 54) 9px 9px, rgb(27, 33, 55) 10px 10px, rgb(27, 33, 55) 11px 11px, rgb(28, 33, 55) 12px 12px, rgb(28, 33, 56) 13px 13px, rgb(28, 34, 56) 14px 14px, rgb(28, 34, 56) 15px 15px, rgb(28, 34, 57) 16px 16px, rgb(29, 34, 57) 17px 17px, rgb(29, 34, 57) 18px 18px, rgb(29, 35, 58) 19px 19px, rgb(29, 35, 58) 20px 20px, rgb(29, 35, 58) 21px 21px, rgb(29, 35, 59) 22px 22px, rgb(30, 35, 59) 23px 23px, rgb(30, 36, 59) 24px 24px, rgb(30, 36, 60) 25px 25px, rgb(30, 36, 60) 26px 26px, rgb(30, 36, 60) 27px 27px, rgb(31, 37, 61) 28px 28px;
}
h2 {
margin: 0 auto;
background: #cc324b;
padding: 1em 0.4em;
font-size: 1.5em;
font-weight: 400;
display: block;
line-height: 1em;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: #fff;
}
.game p {
margin-top: 0.5em;
font-size: 1.8em;
padding-bottom: 0.5em;
}
#count {
color: #f39c12;
font-weight: 700;
font-size: 1.5em;
}
input {
width: 300px;
height: 50px;
display: block;
padding: 0.8em 0;
margin: 0.8em auto 0;
background: #50597b;
color: #fff;
border: solid 1px #1f253d;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
input.button {
background: #1F253D;
color: #95a5a6;
font-size: 2em;
padding: 0.2em;
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;
}
input.button:hover {
background: #e64c65;
color: #fff;
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;
cursor: pointer;
}
input.text {
text-align: center;
padding: 0.2em;
font-size: 2em;
}
input:focus {
outline: none !important;
}
::-webkit-input-placeholder {
color: #95a5a6;
}
:-moz-placeholder {
/* Firefox 18- */
color: #95a5a6;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #95a5a6;
}
:-ms-input-placeholder {
color: #95a5a6;
}
ul.guessBox {
height: 80px;
margin: 10px auto 0;
background: #11a8ab;
padding: 0.5em;
display: block;
line-height: 2em;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
color: #fff;
overflow: auto;
}
ul.guessBox li {
display: inline;
background-color: #1a4e95;
padding: 0.3em;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 95%;
margin: 0.2em;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Top Navigation -->
<nav>
<ul class="clearfix">
<li><a class="what" href="#">What ?</a>
</li>
<li><a class="new" href="#">+ New Game</a>
</li>
</ul>
</nav>
<!-- Modal Information Box -->
<div class="overlay" id="modal">
<div class="content">
<h3>What do I do?</h3>
<div>
<p>This is a Hot or Cold Number Guessing Game. The game goes like this:</p>
<ul>
<li>1. I pick a <strong>random secret number</strong> between 1 to 100 and keep it hidden.</li>
<li>2. You need to <strong>guess</strong> until you can find the hidden secret number.</li>
<li>3. You will <strong>get feedback</strong> on how close ("hot") or far ("cold") your guess is.</li>
</ul>
<p>So, Are you ready?</p>
<a class="close" href="#">Got It!</a>
</div>
</div>
</div>
<!-- logo text -->
<h1>HOT or COLD</h1>
</header>
<section class="game">
<!-- Guessing Section -->
<h2 id="feedback">Make your Guess!</h2>
<!--<form>-->
<input type="text" name="userGuess" id="userGuess" class="text" maxlength="3" autocomplete="off" placeholder="Enter your Guess" required/>
<input type="submit" id="guessButton" class="button" name="submit" value="Guess" />
<!--</form>-->
<p>Guess #<span id="count">0</span>!</p>
<ul id="guessList" class="guessBox clearfix">
</ul>
</section>

I suspect that your problem is how to check if the difference between the randomnNumber and user's input is greater than 30. Here's the solution in JavaScript:
var userInput = $("#userGuess").val();
var difference = Math.abs(randomNumber - userInput);
if (difference > 30){
$('#feedback').text('very cold');
}

Before everything, as many have mentioned already. You need to remove the <form> tags and change the input type from submit to button.
I've looked at your code and i've altered it in a way of showing you how the check can be done. Check the JSFiddle:
https://jsfiddle.net/1w17oh13/3/
All the checks will be done inside the compareGuess()
//user guess
function compareGuess()
{
var guess = parseInt($("#userGuess").val());
guessCount += 1;
guesses.push(guess);
guessDistance = Math.abs(randomNumber - guess);
previousGuessDistance = Math.abs(randomNumber - guesses[guesses.length - 2]);
if (guess == randomNumber)
{
$('#feedback').text('You Win!');
}
else {
console.log(guess, randomNumber, previousGuessDistance, guessDistance);
if (isNaN(previousGuessDistance)) {
if (guess > randomNumber) {
$('#feedback').text('Guess lower!');
} else if (guess < randomNumber) {
$('#feedback').text('Guess higher!');
}
} else if (guessDistance > previousGuessDistance) {
if (guess > randomNumber) {
$('#feedback').text('Getting colder');
} else if (guess < randomNumber) {
$('#feedback').text('Getting colder, guess higher!');
}
} else if (guessDistance < previousGuessDistance) {
if (guess > randomNumber) {
$('#feedback').text('Getting hotter, guess lower!');
} else if (guess < randomNumber) {
$('#feedback').text('Getting hotter, guess higher!');
}
} else if (guessDistance === previousGuessDistance) {
if (guess > randomNumber) {
$('#feedback').text('On fire, guess lower!');
} else if (guess < randomNumber) {
$('#feedback').text('On fire, guess higher!');
}
} else {
$('#feedback').text('ERROR: Your guess must be a number between 1 and 100').css({
color: 'red'
});
}
}
}

Function keeps resetting itself without being called

I am trying to make a number guessing game. Unfortunately, the count/guessNo variable keeps resetting itself, indicating that the newGame function is being ended prematurely. This appears to happen primarily when switching from one guess number to another. Please do not recommend changes to my HTML; this is for an online bootcamp and we are required to use the supplied HTML. Here's my code.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hot || Cold</title>
<!-- Meta Tags -->
<meta charset="utf-8"/>
<!-- Stylesheets -->
<link rel="stylesheet" href="styles/reset.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles/style.css"/>
<!-- JavaScript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<header> <!--Header -->
<!-- Top Navigation -->
<nav>
<ul class="clearfix">
<li><a class="what" href="#">What ?</a></li>
<li><a class="new" href="#">+ New Game</a></li>
</ul>
</nav>
<!-- Modal Information Box -->
<div class="overlay" id="modal">
<div class="content">
<h3>What do I do?</h3>
<div>
<p>This is a Hot or Cold Number Guessing Game. The game goes like this: </p>
<ul>
<li>1. I pick a <strong>random secret number</strong> between 1 to 100 and keep it hidden.</li>
<li>2. You need to <strong>guess</strong> until you can find the hidden secret number.</li>
<li>3. You will <strong>get feedback</strong> on how close ("hot") or far ("cold") your guess is.</li>
</ul>
<p>So, Are you ready?</p>
<a class="close" href="#">Got It!</a>
</div>
</div>
</div>
<!-- logo text -->
<h1>HOT or COLD</h1>
</header>
<section class="game"> <!-- Guessing Section -->
<h2 id="feedback">Make your Guess!</h2>
<form>
<input type="text" name="userGuess" id="userGuess" class="text" maxlength="3" autocomplete="off" placeholder="Enter your Guess" required/>
<input type="submit" id="guessButton" class="button" name="submit" value="Guess"/>
</form>
<p>Guess #<span id="count">0</span>!</p>
<ul id="guessList" class="guessBox clearfix">
</ul>
</section>
</body>
</html>
$(document).ready(function(){
$(".what").click(function(){
$(".overlay").fadeIn(1000);
});
$("a.close").click(function(){
$(".overlay").fadeOut(1000);
});
newGame();
});
//call newGame when user enters number and presses enter
function newGame() {
var guessNo = 0;
var x = Math.floor(Math.random() * 100) + 1;
$('#guessButton').click(function(){
guesser(x,guessNo);
});
$('.new').click(function(){
newGame();
});
}
function guesser(x,guessNo) {
//jQuery
var guess = parseInt(document.getElementById("userGuess").value, 10);
var y = Math.abs(x-guess);
var r = "";
//switch statement
if ((guess > 100) || (guess < 1) || (isNaN(guess) == true)) {
r = "please enter a number between 1 and 100";
}
else if (y >= 50) {
r = "Ice cold";
}
else if (y >= 30) {
r = "cold";
}
else if (y >= 20) {
r = "warm";
}
else if (y >= 10) {
r = "hot";
}
else if (y >= 1) {
r = "very hot";
}
else {
r = "correct!";
}
guessNo += 1;
//jQuery
document.getElementById("feedback").innerHTML = r;
document.getElementById("count").innerHTML = guessNo;
console.log("guess = " + guess);
console.log("x = " + x);
console.log("y = " + y);
console.log("r = " + r);
return guessNo;
$('#guessButton').click(function(){
guesser(x,guessNo);
});
}

Solved. So basically, the problem that I ran into was that the submit button in my original code kept resetting the entire page instead of just processing the information in the textboxes.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hot || Cold</title>
<!-- Meta Tags -->
<meta charset="utf-8"/>
<!-- Stylesheets -->
<link rel="stylesheet" href="styles/reset.css">
<link href='http://fonts.googleapis.com/css?family=Lato:400,700,900,900italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles/style.css"/>
<!-- JavaScript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body>
<header> <!--Header -->
<!-- Top Navigation -->
<nav>
<ul class="clearfix">
<li><a class="what" href="#">What ?</a></li>
<li><a class="new" href="#">+ New Game</a></li>
</ul>
</nav>
<!-- Modal Information Box -->
<div class="overlay" id="modal">
<div class="content">
<h3>What do I do?</h3>
<div>
<p>This is a Hot or Cold Number Guessing Game. The game goes like this: </p>
<ul>
<li>1. I pick a <strong>random secret number</strong> between 1 to 100 and keep it hidden.</li>
<li>2. You need to <strong>guess</strong> until you can find the hidden secret number.</li>
<li>3. You will <strong>get feedback</strong> on how close ("hot") or far ("cold") your guess is.</li>
</ul>
<p>So, Are you ready?</p>
<a class="close" href="#">Got It!</a>
</div>
</div>
</div>
<!-- logo text -->
<h1>HOT or COLD</h1>
</header>
<section class="game"> <!-- Guessing Section -->
<h2 id="feedback">Make your Guess!</h2>
<form>
<input type="text" name="userGuess" id="userGuess" class="text" maxlength="3" autocomplete="off" placeholder="Enter your Guess" required/>
<!-- should not be submit -->
<input type="submit" id="guessButton" class="button" name="submit" value="Guess"/>
</form>
<p>Guess #<span id="count">0</span>!</p>
<ul id="guessList" class="guessBox clearfix">
</ul>
</section>
</body>
</html>
CSS:
clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
width: 100%;
height: 100%;
background-color: #394264;
}
body {
position: relative;
width: 98%;
height: 96%;
margin: 0.8em auto;
font-family: 'Lato', Calibri, Arial, sans-serif;
background-color: #1F253D;
text-align: center;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}
a {
text-decoration: none;
color: black;
}
ul li {
display: inline;
}
/*---------------------------------------------------------------------------------
Header Styles
---------------------------------------------------------------------------------*/
nav {
position: relative;
height: 10%;
padding: 1em;
}
nav ul li {
text-transform: uppercase;
font-weight: 700;
font-size: 1.2em;
}
nav ul li:first-child {
float: left;
}
nav ul li:last-child {
float: right;
}
nav a {
color: #fff;
}
h1 {
font-weight: 900;
font-size: 3em;
padding: 0.8em;
color: #fff;
}
/*style for hidden modal*/
.overlay {
width: 100%;
height: 100%;
color: #fff;
background: #e74c3c;
position: absolute;
top: 0;
left: 0;
margin: 0;
z-index: 1000;
display: none;
}
.content {
color: #fff;
background: #e74c3c;
position: relative;
height: auto;
width: 600px;
border-radius: 3px;
top: 15%;
margin: auto auto;
border: 1px solid rgba(0,0,0,0.1);
}
.content h3 {
margin: 0;
padding: 0.4em;
text-align: center;
font-size: 2.4em;
font-weight: 300;
opacity: 0.8;
background: rgba(0,0,0,0.1);
border-radius: 3px 3px 0 0;
}
.content > div {
padding: 15px 40px 30px;
margin: 0;
font-weight: 300;
font-size: 1.15em;
}
.content > div p {
margin: 0;
padding: 10px 0;
line-height: 2em;
text-align: justify;
}
.content > div ul {
margin-bottom: -30px;
padding: 0 0 30px 20px;
text-align: left;
}
.content > div ul li {
padding: 5px 0;
display: block;
list-style-type: disc;
line-height: 1.5em;
}
.content > div ul li strong{
text-decoration: underline;
}
.content > div a {
font-size: 0.8em;
background: #1F253D;
color: #95a5a6;
padding: 0.5em 2em;
margin-bottom: 50px;
border-radius: 3px;
}
/*---------------------------------------------------------------------------------
Game Section Styles
---------------------------------------------------------------------------------*/
.game {
position: relative;
background-color: #394264;
width: 380px;
height: 380px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
margin: 0 auto;
box-shadow: rgb(26, 31, 52) 1px 1px,
rgb(26, 31, 52) 2px 2px,
rgb(26, 31, 52) 3px 3px,
rgb(26, 31, 53) 4px 4px,
rgb(26, 32, 53) 5px 5px,
rgb(27, 32, 53) 6px 6px,
rgb(27, 32, 54) 7px 7px,
rgb(27, 32, 54) 8px 8px,
rgb(27, 32, 54) 9px 9px,
rgb(27, 33, 55) 10px 10px,
rgb(27, 33, 55) 11px 11px,
rgb(28, 33, 55) 12px 12px,
rgb(28, 33, 56) 13px 13px,
rgb(28, 34, 56) 14px 14px,
rgb(28, 34, 56) 15px 15px,
rgb(28, 34, 57) 16px 16px,
rgb(29, 34, 57) 17px 17px,
rgb(29, 34, 57) 18px 18px,
rgb(29, 35, 58) 19px 19px,
rgb(29, 35, 58) 20px 20px,
rgb(29, 35, 58) 21px 21px,
rgb(29, 35, 59) 22px 22px,
rgb(30, 35, 59) 23px 23px,
rgb(30, 36, 59) 24px 24px,
rgb(30, 36, 60) 25px 25px,
rgb(30, 36, 60) 26px 26px,
rgb(30, 36, 60) 27px 27px,
rgb(31, 37, 61) 28px 28px;
}
h2 {
margin: 0 auto;
background: #cc324b;
padding: 1em 0.4em;
font-size: 1.5em;
font-weight: 400;
display: block;
line-height: 1em;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: #fff;
}
.game p {
margin-top: 0.5em;
font-size: 1.8em;
padding-bottom: 0.5em;
}
#count {
color: #f39c12;
font-weight: 700;
font-size: 1.5em;
}
input {
width: 300px;
height: 50px;
display: block;
padding: 0.8em 0;
margin: 0.8em auto 0;
background: #50597b;
color: #fff;
border: solid 1px #1f253d;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
input.button {
background: #1F253D;
color: #95a5a6;
font-size: 2em;
padding: 0.2em;
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;
}
input.button:hover {
background: #e64c65;
color: #fff;
-webkit-transition: background 1s ease-in-out;
-moz-transition: background 1s ease-in-out;
-ms-transition: background 1s ease-in-out;
-o-transition: background 1s ease-in-out;
transition: background 1s ease-in-out;
cursor: pointer;
}
input.text {
text-align: center;
padding: 0.2em;
font-size: 2em;
}
input:focus {
outline: none !important;
}
::-webkit-input-placeholder {
color: #95a5a6;
}
:-moz-placeholder { /* Firefox 18- */
color: #95a5a6;
}
::-moz-placeholder { /* Firefox 19+ */
color: #95a5a6;
}
:-ms-input-placeholder {
color: #95a5a6;
}
ul.guessBox {
height: 80px;
margin: 10px auto 0;
background: #11a8ab;
padding: 0.5em;
display: block;
line-height: 2em;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
color: #fff;
overflow: auto;
}
ul.guessBox li {
display: inline;
background-color: #1a4e95;
padding: 0.3em;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 95%;
margin: 0.2em;
color: #fff;
}
Javascript:
$(document).ready(function(){
$(".what").click(function(){
$(".overlay").fadeIn(1000);
});
gameState = {};
$("a.close").click(function(){
$(".overlay").fadeOut(1000);
});
$('#guessButton').click(function(){
guesser();
console.log("test");
});
$('.new').click(function(){
newGame();
});
});
function newGame() {
gameState.guessNumber = 0;
gameState.number = Math.floor(Math.random() * 100) + 1;
}
function guesser() {
//jQuery
event.preventDefault();
var x = gameState.number
var guess = parseInt($('#userGuess').val());
var y = Math.abs(x-guess);
var r = "";
if ((guess > 100) || (guess < 1) || (isNaN(guess) == true)) {
r = "please enter a number between 1 and 100";
}
else if (y >= 50) {
r = "Ice cold";
}
else if (y >= 30) {
r = "cold";
}
else if (y >= 20) {
r = "warm";
}
else if (y >= 10) {
r = "hot";
}
else if (y >= 1) {
r = "very hot";
}
else {
r = "correct!";
}
gameState.guessNumber ++;
document.getElementById("feedback").innerHTML = r;
document.getElementById("count").innerHTML = gameState.guessNumber;
console.log("guess = " + guess);
console.log("x = " + x);
console.log("y = " + y);
console.log("r = " + r);
//return guessNo;
}

Append does not work for appending text to an element

Similar to this question:
jQuery append fadeIn
But the solution isn't working for me.
Basically trying to ask the user their name and then append a greeting below.
Preferably on a fade in, I've tried a few solutions I came across here but to no avail.
The "document.name_form..etc) works fine when called inside an alert as well.
Can anyone see where I'm going wrong?
function doit() {
$('#item2').append( document.name_form.fname.value +"U WOT");
}
(The function doit gets triggered from the html forms "onSubmit", and has triggered alerts etc successfully)
Code snippet:
var greeting = "hello "
var div = document.getElementById('#item2');
function doit() {
$('#item2').append(document.name_form.fname.value + "U WOT");
}
// alert(greeting + document.name_form.fname.value)
//
//
// $( " HEYTHERDUDE " + document.name_form.fname.value).appendTo($( " #item2 " ));
//
// div.innerHTML = div.innerHTML + 'LOOK AT ME' + document.name_form.fname.value;
/***************************/
/*****CONTAINER STYLES******/
/***************************/
body {
background-color: #212130;
}
#container {
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
width: 100%;
min-width: 225px;
max-width: 325px;
}
/***************************/
/*******INPUT STYLES********/
/***************************/
.input {
height: 25px;
width: 100%;
background-color: transparent;
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: #c5c520;
outline: 0;
-webkit-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
-webkit-transition: box-shadow 0.2s;
-o-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
}
.input:hover {
box-shadow: inset 0 -10px 20px -10px #131322;
-moz-box-shadow: inset 0 -10px 20px -10px #131322;
-webkit-box-shadow: inset 0 -10px 20px border-right-width: 1px;
border-left-color: #181825;
border-right-color: #181825;
}
.input:focus {
background-color: #191929;
}
.name_submit {
color: #181825;
background-color: #c5c520;
border: none;
}
.submit_btn {
display: none;
}
.question {
display: block;
bottom: 15px;
}
/***********************************/
/*******ITEM SPECIFIC STYLES********/
/***********************************/
#item1 {
display: block;
}
#item2 {
top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<!-- WHAT IS YOUR NAME -->
<div class="question" id="item1">
<div class="text">
<p>
Before we get started, what is your name?
</p>
</div>
<form name="name_form" action="" onSubmit="doit()">
<input type="text" class="input" name="fname">
<p></p>
<input type="button" value="Submit" class="submit_btn">
</form>
</div>
<!-- GREETING RE NAME -->
<div class="question" id="item2">
HI THERE
</div>
</div>

.append() should be used to add new DOM elements. To add text to an existing element, use .text.
function doit(e) {
e.preventDefault();
$('#item2').text( function(i, oldtext) {
return oldtext + $("form[name=name_form] input[name=fname]").val()+"U WOT";
});
}
You also have to use preventDefault() to prevent the form from being submitted. To match this, I changed the <form> to:
<form name="name_form" action="" onSubmit="doit(event)">
Demo:
var greeting = "hello "
var div = document.getElementById('#item2');
function doit(e) {
e.preventDefault();
$('#item2').text(function(i, oldtext) {
return oldtext + $("form[name=name_form] input[name=fname]").val() + "U WOT";
});
}
// alert(greeting + document.name_form.fname.value)
//
//
// $( " HEYTHERDUDE " + document.name_form.fname.value).appendTo($( " #item2 " ));
//
// div.innerHTML = div.innerHTML + 'LOOK AT ME' + document.name_form.fname.value;
/***************************/
/*****CONTAINER STYLES******/
/***************************/
body {
background-color: #212130;
}
#container {
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
width: 100%;
min-width: 225px;
max-width: 325px;
}
/***************************/
/*******INPUT STYLES********/
/***************************/
.input {
height: 25px;
width: 100%;
background-color: transparent;
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: #c5c520;
outline: 0;
-webkit-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
-webkit-transition: box-shadow 0.2s;
-o-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
}
.input:hover {
box-shadow: inset 0 -10px 20px -10px #131322;
-moz-box-shadow: inset 0 -10px 20px -10px #131322;
-webkit-box-shadow: inset 0 -10px 20px border-right-width: 1px;
border-left-color: #181825;
border-right-color: #181825;
}
.input:focus {
background-color: #191929;
}
.name_submit {
color: #181825;
background-color: #c5c520;
border: none;
}
.submit_btn {
display: none;
}
.question {
display: block;
bottom: 15px;
}
/***********************************/
/*******ITEM SPECIFIC STYLES********/
/***********************************/
#item1 {
display: block;
}
#item2 {
top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<!-- WHAT IS YOUR NAME -->
<div class="question" id="item1">
<div class="text">
<p>
Before we get started, what is your name?
</p>
</div>
<form name="name_form" action="" onSubmit="doit(event)">
<input type="text" class="input" name="fname">
<p></p>
<input type="button" value="Submit" class="submit_btn">
</form>
</div>
<!-- GREETING RE NAME -->
<div class="question" id="item2">
HI THERE
</div>
</div>
Actually, your append() DOES work. You had two problems in your fiddle:
You had onLoad selected. This causes all the code to be inside a window.onload function, so it wasn't in the global scope, which is needed for functions used in onsubmit attributes. Using No wrap fixes this.
You weren't preventing the default submission. Beside the way I did this above, you can also do it by simply returning false in the onsubmit:
onsubmit="doit(); return false;"
Demo:
var greeting = "hello "
var div = document.getElementById('#item2');
function doit() {
$('#item2').append(document.name_form.fname.value + "U WOT");
}
// alert(greeting + document.name_form.fname.value)
//
//
// $( " HEYTHERDUDE " + document.name_form.fname.value).appendTo($( " #item2 " ));
//
// div.innerHTML = div.innerHTML + 'LOOK AT ME' + document.name_form.fname.value;
/***************************/
/*****CONTAINER STYLES******/
/***************************/
body {
background-color: #212130;
}
#container {
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
width: 100%;
min-width: 225px;
max-width: 325px;
}
/***************************/
/*******INPUT STYLES********/
/***************************/
.input {
height: 25px;
width: 100%;
background-color: transparent;
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: #c5c520;
outline: 0;
-webkit-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
-webkit-transition: box-shadow 0.2s;
-o-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
}
.input:hover {
box-shadow: inset 0 -10px 20px -10px #131322;
-moz-box-shadow: inset 0 -10px 20px -10px #131322;
-webkit-box-shadow: inset 0 -10px 20px border-right-width: 1px;
border-left-color: #181825;
border-right-color: #181825;
}
.input:focus {
background-color: #191929;
}
.name_submit {
color: #181825;
background-color: #c5c520;
border: none;
}
.submit_btn {
display: none;
}
.question {
display: block;
bottom: 15px;
}
/***********************************/
/*******ITEM SPECIFIC STYLES********/
/***********************************/
#item1 {
display: block;
}
#item2 {
top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<!-- WHAT IS YOUR NAME -->
<div class="question" id="item1">
<div class="text">
<p>
Before we get started, what is your name?
</p>
</div>
<form name="name_form" action="" onSubmit="doit(); return false">
<input type="text" class="input" name="fname">
<p></p>
<input type="button" value="Submit" class="submit_btn">
</form>
</div>
<!-- GREETING RE NAME -->
<div class="question" id="item2">
HI THERE
</div>
</div>

I think the problem is that the function doit is not available when you bind onsubmit.
You can try to declare doit like a variable:
doit = function(){
By the way, if you don't want to submit really the form you can bind onclick instead of onsubmit.
Code snippet:
var greeting = "hello "
var div = document.getElementById('#item2');
doit = function() {
$('#item2').append(document.name_form.fname.value + "U WOT");
return false;
}
// alert(greeting + document.name_form.fname.value)
//
//
// $( " HEYTHERDUDE " + document.name_form.fname.value).appendTo($( " #item2 " ));
//
// div.innerHTML = div.innerHTML + 'LOOK AT ME' + document.name_form.fname.value;
/***************************/
/*****CONTAINER STYLES******/
/***************************/
body {
background-color: #212130;
}
#container {
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
width: 100%;
min-width: 225px;
max-width: 325px;
}
/***************************/
/*******INPUT STYLES********/
/***************************/
.input {
height: 25px;
width: 100%;
background-color: transparent;
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: #c5c520;
outline: 0;
-webkit-transition: background-color 0.2s;
-o-transition: background-color 0.2s;
transition: background-color 0.2s;
-webkit-transition: box-shadow 0.2s;
-o-transition: box-shadow 0.2s;
transition: box-shadow 0.2s;
font-family: 'Exo 2', sans-serif;
color: #c5c520;
font-weight: 300;
}
.input:hover {
box-shadow: inset 0 -10px 20px -10px #131322;
-moz-box-shadow: inset 0 -10px 20px -10px #131322;
-webkit-box-shadow: inset 0 -10px 20px border-right-width: 1px;
border-left-color: #181825;
border-right-color: #181825;
}
.input:focus {
background-color: #191929;
}
.name_submit {
color: #181825;
background-color: #c5c520;
border: none;
}
.submit_btn {
display: none;
}
.question {
display: block;
bottom: 15px;
}
/***********************************/
/*******ITEM SPECIFIC STYLES********/
/***********************************/
#item1 {
display: block;
}
#item2 {
top: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<!-- WHAT IS YOUR NAME -->
<div class="question" id="item1">
<div class="text">
<p>
Before we get started, what is your name?
</p>
</div>
<form name="name_form" action="#" onSubmit="doit()">
<input type="text" class="input" name="fname">
<p></p>
<input type="button" value="Submit" class="submit_btn">
</form>
</div>
<!-- GREETING RE NAME -->
<div class="question" id="item2">
HI THERE
</div>
</div>

Develop Reference

JavaScript is the programming language of the Web.

The Code is not generating a file for cookie in browser - javascript

Related

Open a multiple modal automatically

How do I get a prompt box to send data to a chat box?

If the difference between the input and the variable is over 30 or over then the text for #feedback should be .

Function keeps resetting itself without being called

Append does not work for appending text to an element

Categories

Resources