Log box with text input - javascript

I am trying to create a log box with a text input and a submit button. I can get it to display entered text with
var test = function() {
var test1 = document.getElementById('input');
var totalTest = test1.value;
document.getElementById('log').innerHTML += totalTest;
};
But I cant get it to respond to it. I want to keep asking questions and all answers come from one input box. I am very new still to JavaScript, and would love anyone's help.
Here is all I have so far. JAVASCRIPT:
var playerInput = function () {
var pInput = document.getElementById('input');
var input = pInput.value;
};
var playerNum = function () { //Choice between Single and Multiplayer
document.getElementById('log').innerHTML = "Would you like to play singleplayer or multiplayer?";
oneOrTwo(input);
};
var oneOrTwo = function (input) {
var playerAmount = input;
if (playerAmount == "singleplayer") {
//singlePlay();
} else {
document.getElementById('log').innerHTML = "Multiplayer is coming soon";
//multiPlay();
}
};
HTML:
<!DOCTYPE html>
<html>
<head>
<title> Rock Paper Scissors, with Single and Multiplayer! </title>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div id="logHeader">
<h1 style="font-size: 20px; font-family: calibri;"> Rock, Paper, Scissors </h1>
</div>
<div id="log"></div>
<br >
<input id="input" type="text" onFocus="if(this.value=='Type here') this.value='';" style="border: 2px solid; width: 300px; background-color: lightblue;" value="Type here">
<input type="button" value="Enter" onClick="test()">
<br >
<br >
<input type="button" onclick="playerNum()" value="Start Game">
</body>
</html>

Really all you need to change is to move the oneOrTwo(input) call up to your playerInput() function.
It doesn't make sense to try to read the input right away after asking the question; the user won't have time to respond.
var playerNum = function () { //Choice between Single and Multiplayer
document.getElementById('log').innerHTML = "Would you like to play singleplayer or multiplayer?";
//nothing else, read the input later
};
When the player enters a response and clicks the 'Enter' button, then try to read the input:
var playerInput = function () {
var pInput = document.getElementById('input');
var input = pInput.value;
oneOrTwo(input);
};
And the corresponding HTML:
<input type="button" value="Enter" onClick="playerInput()">
Threw it into a JSFiddle here: http://jsfiddle.net/KfUp8/

var input = pInput.value; stores the value of your input into that variable.
It will never change unless you execute that same line again.
Replace oneOrTwo(input); with oneOrTwo(pInput.value); to get a fresh value every time.

Related

Console log data return as null

Sorry for the little explanation. So i have already done my chrome extension and i already have a save data in my localstorage which is FirstName. so now the getElementById is the one suppose to web scape my current page that i am on to fill up the form when i click START which is button1 Hopefully these clear things
i have also provided my index.html where if i click start it should execute injector.js
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<style>
html,
body {
height: 200px;
width: 400px;
}
</style>
</head>
<body>
<h1>Adidas ACO</h1>
<h2>Select your choice</h2>
<button>Go for Setup</button>
<button id="buttonstart"><script src="injector.js"></script>
</script>START</button>
<!-- <br>
<br>
<label for="Title">Title</label>
<input type="text" id="firstnametitle" name="title" size="50" value=""/> -->
<!--<script scr="injector.js"></script>-->
<!--<button onclick="fillforms(fillup)">Start</button>-->
</body>
</html>
injector.js
// Get my button and localstorage data
var button1 = document.getElementById("buttonstart");
var firstName = localStorage.getItem('First Name');
var lastName = localStorage.getItem('Last Name');
var address1 = localStorage.getItem('Address 1');
var address2 = localStorage.getItem('Address 2');
var email = localStorage.getItem('Email');
var phoneNumber = localStorage.getItem('Phone Number');
/// When button is click, it will webscape and fill up
button1.onclick = function(){
var firstName = localStorage.getItem('First Name');
var field1 = document.getElementsByClassName("shippingAddress-firstName");
fillField(field1, firstName);
console.log(field1)
console.log(firstName)
}
function fillField(field1, value){
if(field1){
field1.value = value;
}
}
Picture to my console values
Declare the variables firstname and field1 at the start of the file.You have to do it because in your code you can only use those variables inside the button1.onclick function since you have declared them there.

Local storage example doesn't work how I expect it to be

In my Web university course there is this example with local storage and it says it should show in the input area the number of clicks on the button and also store it in localstorage, but all I get is NaN on the input no matter how many times I click on the button.
<head>
<script>
window.onload = function()
{
var el=document.getElementById("bt");
el.onclick= function()
{
var x = parseInt(localStorage.getItem("nrc"));
if (x!==NaN){
localStorage.setItem("nrc", x + 1);
}
else{
localStorage.setItem("nrc", "1");
}
document.getElementById("write").value = localStorage.getItem("nrc");
}
document.getElementById("write").value = localStorage.getItem("nrc");
var buton2=document.getElementById("bt2");
buton2.onlick = function ()
{
localStorage.removeItem("nrc");
}
}
</script>
</head>
<body>
<p> Number of clicks on the button <input type="text" id="write" value="0"> </p>
<button id="bt"> Click</button>
<button id="bt2"> Click2</button>
</body>
Edit: problem was solved, but now if i want to remove an item from local storage or clear the localstorage it doesn't work.
You have a typo, you wrote onlick instead of onclick
buton2.onclick = function() {
console.log('clearing storage!');
localStorage.removeItem("nrc");
// Reset input back to zero
document.getElementById("write").value = '0';
}
Complete working example here
You were checking a non number to a non number which will always true.
Anyways the solution is already posted in the comments
<head>
<script>
window.onload = function() {
var el = document.getElementById("bt");
el.onclick = function() {
var x = parseInt(localStorage.getItem("nrc"));
if (!isNaN(x)) {
localStorage.setItem("nrc", x + 1);
} else {
localStorage.setItem("nrc", "1");
}
document.getElementById("write").value = localStorage.getItem("nrc");
}
document.getElementById("write").value = localStorage.getItem("nrc");
}
</script>
</head>
<body>
<p> Number of clicks on the button <input type="text" id="write" value="0"> </p>
<button id="bt"> Click</button>
</body>

Why aren't the user inputs being put into the empty array?

I'm trying to write a program so that once the user clicks the 'Add!' button, the string that they typed will be added to an initially empty array in an object, and then that updated array will be displayed back on the HTML page. However, when I checked what the value of the items array was when I typed something in, it still appeared to be null. I'm fairly certain that the addItem function is fine, is the problem in the updateList function?
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>Homework 5</title>
<!--<link rel="stylesheet" type="text/css" href="index.css">-->
<script src="toDoList.js"></script>
</head>
<body>
<h1>Homework 5: JS Objects & HTML DOM</h1>
<div id="input">
<input id="userInput" type="text" placeholder="Type a word">
<button id="submit">Add</button>
</div>
<div id="output"></div>
<h1>Design</h1>
<h1>Challenges</h1>
</body>
</html>
JAVASCRIPT CODE:
var button = document.getElementById("submit");
var toDoList = {
items: [],
add: addItem,
update: updateList
};
function addItem(string) {
toDoList.items.push(string);
}
function updateList() {
var output = document.getElementById("output");
output.innerHTML = toDoList.items;
}
function getInput() {
var input = document.getElementById("userInput").value;
toDoList.add(input);
toDoList.update();
//clearing the text field for next use
document.getElementById("userInput").innerHTML = "";
}
button.addEventListener('click', getInput());
The second argument provided to addEventListener needs to be a function. If you put a function invocation there, that function is executed immediately, with its return value assigned as the handler. But if the return value isn't a function, the event listener doesn't work.
In your case, you just want getInput to be run when the button is clicked - getInput is not a higher-order function, so just pass the function itself, rather than invoking it:
button.addEventListener('click', getInput);
Like this
var button = document.getElementById("submit");
var toDoList = {
items: [],
add: addItem,
update: updateList
};
function addItem(string) {
toDoList.items.push(string);
}
function updateList() {
var output = document.getElementById("output");
output.innerHTML = toDoList.items;
}
function getInput() {
var input = document.getElementById("userInput").value;
toDoList.add(input);
toDoList.update();
//clearing the text field for next use
document.getElementById("userInput").innerHTML = "";
}
button.addEventListener('click', getInput);
<h1>Homework 5: JS Objects & HTML DOM</h1>
<div id="input">
<input id="userInput" type="text" placeholder="Type a word">
<button id="submit">Add</button>
</div>
<div id="output"></div>
<h1>Design</h1>
<h1>Challenges</h1>
You should not invoke or execute the function in addEventListener. Invoking function causes the function to execute immediately not when the event (click) happens. So remove parenthesis after the function name.
Change button.addEventListener('click', getInput());
To
button.addEventListener('click', getInput);
var button = document.getElementById("submit");
var toDoList = {
items: [],
add: addItem,
update: updateList
};
function addItem(string) {
toDoList.items.push(string);
}
function updateList() {
var output = document.getElementById("output");
output.innerHTML = toDoList.items;
}
function getInput() {
var input = document.getElementById("userInput").value;
toDoList.add(input);
toDoList.update();
//clearing the text field for next use
document.getElementById("userInput").innerHTML = "";
}
button.addEventListener('click', getInput);
<h1>Homework 5: JS Objects & HTML DOM</h1>
<div id="input">
<input id="userInput" type="text" placeholder="Type a word">
<button id="submit">Add</button>
</div>
<div id="output"></div>
<h1>Design</h1>
<h1>Challenges</h1>
I think, you have to loop through your array. to get the content:
var x = ['apple','banana','orange'];
var output = "";
for (i=0;i<x.length;i++) {
output += x[i];
}
alert(output); //--> outputs applebananaorange
alert(x.items); //--> undefined (whats your case)

How to change field on HTML file when button is pressed

How do I change the HTML itself when I press a button? When I press a button in this case, the value is stored as "displayCount". Is there a way in which I can directly see the count on the HTML code? If it was press one time, I could see the number 1 on the HTML itself, not as a variable?
Thank you!
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> </title>
</head>
<body>
<input type="button" value="Count" id="countButton" />
<p>The button was pressed <span id="displayCount">0</span> times.</p>
<script type="text/javascript">
var count = 0;
var button = document.getElementById("countButton");
var display = document.getElementById("displayCount");
button.onclick = function() {
count++;
display.innerHTML = count;
}
</script>
</body>
</html>
For example, if button was pressed once, one of the line would change from
<p>The button was pressed <span id="displayCount">1</span> times.</p>
This Fiddle works as you want..
i changed your script into :
var count = 0;
function countIt(){
var button = document.getElementById("countButton");
var display = document.getElementById("displayCount");
count++;
display.innerHTML = count;
}
and your HTML to :
<input type="button" onclick="countIt()" value="Count" id="countButton" />
<p>The button was pressed <span id="displayCount">0</span> times.</p>
hope this will help you
<script type="text/javascript">
var clicks = 0;
function onClick() {
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
};
</script>
<button type="button" onClick="onClick()">Count</button>
<p>The button was pressed : <a id="clicks">0</a></p>
Here is my jsfiddle to your problem.
I delete the varible count you used, and just use the number on your HTML, it works well.
var button = document.getElementById("countButton");
var display = document.getElementById("displayCount");
button.onclick = function(){
display.innerHTML = ++display.innerHTML;
}
Thanks,
Edison
I guess you might want to use parseInt() explicitly increment the count as an integer like this:
var count = parseInt(display.textContent,10);
Your code could go like this:
var button = document.getElementById("countButton");
var display = document.getElementById("displayCount");
var count = parseInt(display.textContent,10);
button.onclick = function(){
count++;
display.innerHTML = count;
}
DEMO : http://jsfiddle.net/naokiota/9dQjv/2/
The document of the parseInt() is here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt
Hope this helps.
<script>
var count = 0;
function counts()
{
var result = document.getElementById('txtbxid');
count ++ ;
result.value = count;
}
</script>
<input type="text" id="txtbxid" name="txtbxid">
<input type="button" id="add" name="add" value="add" onClick="counts()">

Javascript onkeypress event fires but input text value is incorrect

I'm writing a simple javascript form that checks the input value against the value "blue". Now if you enter "blue", it says it's incorrect, but then if add any additional character, it says correct. It seems like there's a one-character delay, so when I enter "blue" it's only getting "blu". Here is the code:
<html>
<head>
<title>Favorite Color</title>
</head>
<body>
<h1>Quiz Time</h1>
<h2>What is your favorite color?</h2>
<p>Your Answer: <input type="text" id="txtinput" /></p>
<p id="message"></p>
<script type = "text/javascript">
function init() {
var inp = document.getElementById("txtinput");
inp.onkeypress=checkAnswer;
checkAnswer();
}
onload = init;
function checkAnswer() {
var text = document.getElementById("txtinput");
var msg = document.getElementById("message");
var sol = "blue";
var ans = text.value;
ans = ans.toLowerCase();
if (ans.length <=0) {
msg.innerHTML="<span style=\"color:blue;\">Enter Something.</span>";
}
else if (ans == sol) {
msg.innerHTML="<span style=\"color:green;\">Correct!</span>";
} else {
msg.innerHTML="<span style=\"color:red;\">Wrong!</span>";
}
}
</script>
</body>
</html>
Change the event to onkeyup instead of onkeypress
inp.onkeyup=checkAnswer;
Use the HTML5 input event with a fallback to the propertychange event in IE < 9. I've written about this many times on SO; here are two examples:
jQuery keyboard events
Catch only keypresses that change input?

Categories