I have 2 javascript files.
js file 1 contains the time delay for a speech bubble to appear with animation
see js file 1 code
let bubble = document.getElementById("speach-bubble");
let noDisplay; bubble.style.display ="none";
const delay = setTimeout(bubbleAnimate,1500)
function bubbleAnimate()
{
noDisplay = bubble.style.display ="block";
bubble.style.animation="slidein 0.5s 1";
}
with js file 2 I am trying to make a function that when user clicks submit after typing in their name the speech bubble changes to "welcome to your to-do App" + name
this is what I have so far
let welcome ="Welcome to your To-Do App"
windows.onload = function()
{
document.getElementById("userName").onsubmit = function()
{
let text = document.getElementById("nameId");
let changebox = document.getElementById("speach-bubble").innerHTML = welcome + " " + text;
}
}
this is the elements I am working on within my HTML file
<div class=container>
<div class= base>
<div class = screen>
<img src="images/WarGreymon_Render.png" alt="Wargreymon">
<div id ="speach-bubble"> What is your
name?
<div id = "bubble-text">
</div>
</div>
</div>
<div class = "nameInput">
<form id ="userName">
<input type="text" id ="nameId" name="name" placeholder="Type your name here...">
<input type="submit" id ="submit" value="Submit">
</form>
</div>
</div>
is there a way to link js file 1 to js file 2 so that I can influence the speech bubble after userinput has been submitted.
Related
The code is supposed to randomly select from the user input to generate a random one.
The HTML includes a form where the user can input values which are saved, but I do not know how to store them in an array in javascript where the let decision is what stores them. When the user inputs an option, they press submit where the javascript appends a child with the option that was input (this is not included) In the javascript, but what is included is the random decision button, if let decision was an array, the button would randomly choose from the array.
The HTML:
let btn = document.getElementById('decide');
let output = document.getElementById('output');
const option_input_el = document.createElement('input');
option_input_el.classList.add('text');
option_input_el.type = 'text';
option_input_el.value = task;
option_input_el.setAttribute('readonly', 'readonly');
let decision = []; /*how to make array of the user inputs*/
btn.addEventListener('click', function() {
var chosen = decision[Math.floor(Math.random() * decision.length)];
output.innerHTML = chosen;
});
//this is our code for the decicon
<body>
<!--Our input of choices-->
<div id="center">
<header>
<h1 id="Title">Input Your Choices</h1>
<form id="form">
<input type="text" id="newT" placeholder="Options" />
<input type="submit" id="sumbitT" value="Add" />
</form>
</header>
</div>
<main>
<section class="option-list">
<h2 id="option">Your Options</h2>
<div id="options"></div>
</section>
<div class="container">
<button id="decide"> Let's Decide! </button>
<div id="output">DECISION</div>
</div>
</main>
your HTML code didn't work properly for what you wanted to achieve, so I had to rework it.
to make an array from user input, you can use push to the input.value to an array.
I used only two functions to do what you asked for. and what happens is simple:
1- when the user click add button, it get user's input then
2- push it into an array.
3- display it in the options div.
4- when the user click decide button, it will select a random value from the displayed array. then display it on the decision div.
var input = document.getElementById("input");
var inputArr = [];
var addBtn = document.getElementById("add-btn");
var display = document.getElementById("options-list");
var decideBtn = document.getElementById("decide-btn");
var resultDisplay = document.getElementById("random-output");
addBtn.addEventListener("click", addAnddisplay);
function addAnddisplay() {
inputArr.push(input.value);
display.textContent = inputArr;
}
decideBtn.addEventListener("click", decide);
function decide() {
var decision = inputArr[Math.floor(Math.random() * inputArr.length)];
resultDisplay.textContent = decision ;
}
<h1 id="Title">Input Your Choices</h1>
<input type="data" id="input" placeholder="Options" />
<button id="add-btn">Add</button>
<!-- <input type="submit" id="add-btn" value="Add" /> -->
<h2>Your Options</h2>
<div id="options-list"></div>
<button id="decide-btn"> Let's Decide! </button>
<div id="random-output"></div>
I'm working on a project that I can't get my head around. Fairly new to Javascript, so it isn't too surprising. What I'm attempting is to have a user input their name in the html document, have my javascript file record that name to a variable called userName, then have the next label that appears on the following question add their name to the label for customization. My javascript source file is stored in the same folder as the index.html and is linked in the head of the html file as:
I've included more than is strictly necessary just to show the initializations. Before clicking the button, my 2nd label looks like:
Who are you adventuring with? (Select all that apply)
Solo Couple Family Small Group Large Group
After I click it, it shows:
Thanks [object HTMLInputElement]. who are you going on an adventure with?
First time using stackoverflow, so if I did this wrong let me know.
HTML Section
<!-- Creates app container-->
<div class="appContainer">
<br />
<!-- 1st section. Gather name -->
<div class="gatherName">
<label id="lblName"> What's your name?</label>
<input type="text" id="inputName" />
<button type="button" id="nameBtn" onclick="getGroupSize()">
Next
</button>
<br />
<br />
</div>
Javascript File
// Declarations
var lbl;
let userName;
var groupSizeSolo;
var groupSizeCouple;
var groupSizeFamily;
var groupSizeSmall;
var groupSizeLarge;
//Functions
function getUserName(params) {}
function getGroupSize() {
let lbl = document.getElementById("lblGroupSize");
let userName = document.getElementById("inputName");
//Assign new label based off user input
lbl.innerHTML =
"Thanks " + userName + ". who are you going on an adventure with?";
}
When you use getElementById It returns the HTMLInputElement which you are getting.
An Element object describing the DOM element object matching the
specified ID, or null if no matching element was found in the
document. - MDN
So you need the value
let userName = document.getElementById("inputName").value;
lbl.innerHTML =
"Thanks " + userName + ". who are you going on an adventure with?";
or
let userName = document.getElementById("inputName");
lbl.innerHTML =
"Thanks " + userName.value + ". who are you going on an adventure with?";
var lbl;
let userName;
var groupSizeSolo;
var groupSizeCouple;
var groupSizeFamily;
var groupSizeSmall;
var groupSizeLarge;
//Functions
function getUserName(params) {}
function getGroupSize() {
let lbl = document.getElementById("lblGroupSize");
let userName = document.getElementById("inputName");
//Assign new label based off user input
lbl.innerHTML =
"Thanks " + userName.value + ". who are you going on an adventure with?";
}
<div class="appContainer">
<br />
<!-- 1st section. Gather name -->
<div class="gatherName">
<label id="lblName"> What's your name?</label>
<input type="text" id="inputName" />
<button type="button" id="nameBtn" onclick="getGroupSize()">
Next
</button>
<br />
<br />
</div>
<div id="lblGroupSize"></div>
</div>
There are few thing you got wrong here.
html -
<html>
<div class="appContainer">
<br />
<!-- 1st section. Gather name -->
<div class="gatherName">
<label id="lblName"> What's your name?</label>
<input type="text" id="inputName" />
<button type="button" id="nameBtn" onclick="getGroupSize()">
Next
</button>
<br />
<label id="lbl"></label>
<br />
</div>
</div>
</html
javascript -
function getGroupSize() {
let lbl = document.getElementById("lbl");
let userName = document.getElementById("inputName").value;
//Assign new label based off user input
lbl.innerHTML =
"Thanks " + userName + ". who are you going on an adventure with?";
}
things to note,
Get the value from a HTML , use .value attribute.
Don't declare same variables multiple times.
I'm trying to make a simple to-do list project with an HTML text box where you type in a task and it's displayed on screen, however I don't know how to log what someone types so it can be displayed on the screen.
I've thought of recording the info in an array but, I still don't know how to actually log what is typed in the text box.
<div id="newList">
<input type="text" placeholder="Enter your task here" id="task1"/>
<div id="addBut"></div>
<div id="item"></div>
</div>
if you just want to log to the console:
let input = Document.getElementById("task1");
input.addEventListener("keydown",(e) =>{
e.preventDefault()
console.log(e.currentTarget.value)
});
if you want to display in the screen:
let input = Document.getElementById("task1");
let div = Document.getElementById("item");
input.addEventListener("submit", (e) => {
div.innerHTML(e.currentTarget.value)
})
This is good for Vanilla JS.
You can use onkeyup function on your input.
function logChanges(id){
var x = document.getElementById(id).value;
console.log(x)
}
<div id="newList">
<input type="text" placeholder="Enter your task here" id="task1" onkeyup="logChanges('task1')"/>
<div id="addBut"></div>
<div id="item"></div>
</div>
If you want to display it when you hit a button like the code below does :
function showTextInLog() {
var task1 = document.getElementById('task1');
console.log(task1.value);
}
<div id="newList">
<input type="text" placeholder="Enter your task here" id="task1"/>
<div id="addBut"></div>
<div id="item"></div>
<input type="button" value="submit" onclick="showTextInLog();" />
</div>
Do you have a javascript file to go with this html?
You'll need to at least add a <script> tag to your hmtl file for writing the javascript in.
Once you have that though, you could try adding an eventListener to the input field, and watching their keystrokes.
(see https://developer.mozilla.org/en-US/docs/Web/Events/keydown)
ex/
var input = document.getElementById('task1'); //grab your input element
input.addEventListener('keydown', (event) => { //attached a function to the 'keydown' event which will allow you to change how their keystrokes are handled
switch(event.keyCode){
case 13: //they pressed enter
alert(event.target.innerText); // with the contents of the input
default:
break;
}
})
I have 3 different difficulties for this game I am making. The code I have right now only allows me to click "medium" and "hard". This only changes the elements inside the DIV. I can't seem to make the "easy" button work or even the other ones to work right. Right now it's not replacing the whole DIV with the other but it just displays the content of the other one inside the current one. I think it might be caused by the ".innerHTML" part and I'm not sure what to switch it out with for it all to work.
<script>
function show(param_div_id) {
document.getElementById('divbox3').innerHTML = document.getElementById(param_div_id).innerHTML;
}
</script>
<!-- Border for the game -->
<form id = "divbox3" name = "quiz" >
<div class="game-button" style="width:50%">
<button onclick="show('divbox3')">Easy</button>
<button onclick="show('divbox3med')">Medium</button>
<button onclick="show('divbox3hard')">Hard</button>
</div>
<br>
<br>
<!-- Easy Quiz code -->
<p class = "questions">Most moles have an extra thumb to dig with. <b> True or False? </b></p>
<input id = "textbox" type = "text" name = "q1">
<p class = "questions">What is the smallest country in the world? <b> Tuvalu - Vatican City - Monaco </b></p>
<input id = "textbox" type = "text" name = "q2">
<p class = "questions">What is the biggest atom on the periodic table? <b> Uranium - Francium - Radium - Lead </b></p>
<input id = "textbox" type = "text" name = "q3">
<p class = "questions">Who is the richest man in the world? <b> Bill Gates - Jeff Bezos - Elon Musk </b></p>
<input id = "textbox" type = "text" name = "q4">
<input id = "buttoneasy" type = "button" value = "Finished!" onclick = "check();">
</form>
<div id = "easyscoresheet">
<p id = "easynumber_correct"></p>
<p id = "easymessage"></p>
</div>
<!-- Border for the game -->
<form id = "divbox3med" name = "quizmed" style="display:none;">
<div class="game-button" style="width:50%">
<button onclick="show('divbox3')">Easy</button>
<button onclick="show('divbox3med')">Medium</button>
<button onclick="show('divbox3hard')">Hard</button>
</div>
<br>
<br>
<!-- Medium Quiz code -->
<p class = "questions">What type of animal is Bambi? <b> Elephant - Tiger - Deer </b> </p>
<input id = "textbox" type = "text" name = "q1">
<p class = "questions">Name a US state beginning with K?</p>
<input id = "textbox" type = "text" name = "q2">
<p class = "questions">Who wrote the Harry Potter series? <b> Charles D. - JK Rowling - Vincent V. </b> </p>
<input id = "textbox" type = "text" name = "q3">
<p class = "questions">Who wrote 'The Scarlet Letter'?</p>
<input id = "textbox" type = "text" name = "q4">
<input id = "buttonmed" type = "button" value = "Finished!" onclick = "check();">
</form>
<div id = "medscoresheet">
<p id = "mednumber_correct"></p>
<p id = "medmessage"></p>
</div>
<!-- Border for the game -->
<form id = "divbox3hard" name = "quizhard" style="display:none;">
<div class="game-button" style="width:50%">
<button onclick="show('divbox3')">Easy</button>
<button onclick="show('divbox3med')">Medium</button>
<button onclick="show('divbox3hard')">Hard</button>
</div>
<br>
<br>
<!-- Hard Quiz code -->
<p class = "questions">What chemical element is diamond made of?</p>
<input id = "textbox" type = "text" name = "q1">
<p class = "questions">What game features the terms love, deuce, match and volley?</p>
<input id = "textbox" type = "text" name = "q2">
<p class = "questions">Which planet did Superman come from?</p>
<input id = "textbox" type = "text" name = "q3">
<p class = "questions">How many syllables make up a haiku?</p>
<input id = "textbox" type = "text" name = "q4">
<input id = "buttonhard" type = "button" value = "Finished!" onclick = "check();">
</form>
<div id = "hardscoresheet">
<p id = "hardnumber_correct"></p>
<p id = "hardmessage"></p>
</div>
https://jsfiddle.net/s7vc6y4L/
this is the how I have it set up right now
Thank you
I took a look at the jsFiddle and corrected it.
take a look here:
https://jsfiddle.net/e7862c3d/
function show(param_div_id) {
var quizList = document.getElementsByClassName('quiz');
for(var i=0; i < quizList.length; i++) {
quizList[i].style.display = 'none';
}
document.getElementById(param_div_id).style.display = 'block';
}
You were repeating buttons inside your forms and I think its best to show/hide forms in the instance.
When you start the program, it starts with the easy quiz. When you press "medium", it swaps the code from the divbox3 (easy) form to the code from the divbox3medium (medium) form. This changes the form that you see from the easy level quiz to the medium one. When you press the "easy" button, it swaps the code from the divbox3 (which now contains the code for the medium quiz and no longer the code for the easy quiz) with the code from divbox3 (which your assuming is the easy code, but it is not).
It's like this.
X = Easy
Y = Medium
Z = Hard
Press the Medium Button
X = Y = Medium
Y = Medium
Z = Hard
Press the Easy Button
X = X = Medium
Y = Medium
Z = Hard
To fix this, you could do it the hard way by making a divbox3, divbox3easy, divbox3medium, and divbox3hard. Then you'd change the contents of divbox3 with the contents of whatever level quiz you want, but won't overwrite the code for the easy quiz.
To fix this the easier way, you need to add a visible class to the visible form (not the display: none forms), and then change your show function to do something like this:
function show(param_div_id) {
// Loop through all elements with the visible class and both remove the class and set the display to none
// Add the visible class to param_div_id and set it's display to block
}
I'm not really sure the best way to go about this but I've laid the framework.
Basically, I would like to add the functionality so that when my #moreItems_add button is clicked and calls the moreItems function, I simply want to add a new Input field below it, and so on. I want to limit this to 10 fields though, so I show that in the function.
The only trick is, I will be submitting all fields via ajax to save to the database, so I need to try and keep track of an ID with each.
What's the best way to continue the javascript here so that I can append an input field on button press and keep track of IDs for each?
<div class="modal-body">
<form id="Items">
<label id="ItemLabel">Item 1:</label>
<input type="text" name="Items[]">
<button id="moreItems_add" onclick="moreItems()" id="moreItems">More Items</button>
</form>
</div>
<div class="modal-footer">
<input type="submit" name="saveItems" value="Save Items">
</div>
<!-- modal JS -->
<script type="text/javascript">
function moreItems(){
var MaxItems = 10;
//If less than 10, add another input field
}
</script>
You can use the jQuery .insertBefore() method to insert elements right before "more items" button. Below is the code representing this:
var maxItems = 1;
function moreItems() {
if (maxItems < 10) {
var label = document.createElement("label");
label.id="ItemLabel"+maxItems;
label.innerHTML = "Item "+(maxItems+1)+": ";
var input = document.createElement("input");
input.type='text';
input.name = 'item'+maxItems;
$('<br/>').insertBefore("#moreItems_add");
$(label).insertBefore("#moreItems_add");
$(input).insertBefore("#moreItems_add");
maxItems++;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-body">
<form id="Items">
<label id="ItemLabel">Item 1:</label>
<input type="text" name="Items[]">
<button type="button" id="moreItems_add" onclick="moreItems()" id="moreItems">More Items</button>
</form>
</div>
<div class="modal-footer">
<input type="submit" name="saveItems" value="Save Items">
</div>
Something like this should do the trick:
<!-- modal JS -->
<script type="text/javascript">
var MAX_ITEMS = 10,
added = 0;
function moreItems(){
if (added >= MAX_ITEMS) return;
var newField = document.createElement('input');
newField.type = 'text';
// TODO: Any field setup.
document.getElementById('items').appendChild(newField);
added++;
}
</script>
In terms of tracking each field with an ID, that should always be done by the back-end for data integrity and safety reasons.
some years ago I've wrote an article about making a repeated section using jQuery.
The live example is available on jsFiddle.
In the example you can find that both "add" and "remove" button are available, however you can set just the "add" button for your purpose.
The idea to limit to specific number of repeated boxes is to watch the number of repeatable elements just created in the context. The part of code to change in the live example is rows 13-18:
// Cloning the container with events
var clonedSection = $(theContainer).clone(true);
// And appending it just after the current container
$(clonedSection).insertAfter(theContainer);
There you should check if the number of repeated elements is less than <your desired number> then you will allow the item to be created, else you can do something else (like notice the user about limit reached).
Try this:
const maxItens = 10,
let itensCount = 0;
function moreItems() {
if (itensCount++ >= maxItens) {
return false;
}
let newInput = document.createElement('input');
// use the iterator to make an unique id and name (to submit multiples)
newInput.id = `Items[${itensCount}]`;
newInput.name = `Items[${itensCount}]`;
document.getElementById('items').appendChild(newInput);
return false;
}
Add type "button" to stop submiting the page (also, your button have two ID):
<button id="moreItems_add" onclick="moreItems();" type="button">More Items</button>
The submit button must be inside the form to work:
<form>
<div class="modal-body">
<div id="Items">
<label id="ItemLabel">Item 1:</label>
<input type="text" name="Items[]">
</div>
<button id="moreItems_add" onclick="moreItems()" id="moreItems">More Items</button>
</div>
<div class="modal-footer">
<button type="submit">Save Items</button>
</div>
</form>
To append itens in sequence the button must be outside of div "itens".