Develop Reference

queryselector onclick function gets rejected by DOM

Okay so here is the thing. I added a simple form like this:
<form class="form form--character">
<h1 class="title title--characters">Choose Players</h1>
<div class="form--inputs">
<input type="text" class="input input--players" placeholder="Player 1"><br>
<input type="text" class="input input--players" placeholder="Player 2"><br>
<input type="text" class="input input--players" placeholder="Player 3"><br>
<input type="text" class="input input--players" placeholder="Player 4"><br>
</div>
<br>
<button class="btn btn--add-characters">Add Player</button>
<button class="btn btn--continue">Continue</button>
</form>
The button called btn--add-players has the job to add another input into the div of inputs, which looks something like this:
window.onload =function(){
var players=[];
var playerInputCount=4;
var form = document.querySelector(".form--inputs");
document.querySelector(".btn--add-characters").onclick=function(){
playerInputCount+=1;
form.innerHTML = form.innerHTML + "<input type='text' class='input input--players' placeholder='Player " + playerInputCount + "'><br>";
}
}
The problem now is.. when I click the button, the input gets added to the page, but within milliseconds the DOM seems to get resettet and the Input isnt there anymore.
I put a console log into the function to have a look if it still lands in the console after clicking.
It lands in the console but also within milliseconds the console log is away.
How to fix that issue?

The button is inside a form, so when you click the button, it submits the form. Add type="button".
<button class="btn btn--add-characters" type="button">Add Player</button>

When element is placed within a , its default action will be as a form submit button unless type="button" attribute is specified.
The additional elements created are dismissed because the button submits the . To prevent that from happening, add type="button" attribute for the button with "btn btn--add-characters" class, and it'll be okay.

Problem on Passing getElementById value to textbox Value

I can see the scanned value (id="code") on p element. How can I fill the textbox with this value?
Actually when I press the Scan Barcode button, camera is open and scan an EAN13 barcode, and the value is shown in P element (590123... is the barcode). Can be seen below. But I want to see this value in textbox.
function barcode() {
var resultElement = document.getElementById("code");
// setupLiveReader(resultElement)
}
<p id="code">code is appearing here</p>
<input class="form-control" type="text" id="code">
<button onclick="barcode()" type="submit" class="btn btn-primary btn-sm">Scan Barcode</button>

You can't have two elements with the same id. To get the content of the p tag just call innerHTML on it. After that set the value of your input with the new id.
<p id="code">code is appear here</p>
<input class="form-control" type="text" id="codeInput">
<button onclick="barcode()" type="submit" class="btn btn-primary btn-sm">Scan Barcode</button>
<script>
function barcode() {
var resultElement = document.getElementById("code").innerHTML;
//setupLiveReader(resultElement)
document.getElementById("codeInput").value = resultElement;
}
</script>

Change the id so that you only have one id="code", then update the script so resultElement has the id of the <input...
<p id="code">code is appear here</p>
<input class="form-control" type="text" id="code-input">
<button onclick="barcode()" type="submit" class="btn btn-primary btn-sm">Scan Barcode</button>
<script>
function barcode() {
const resultElement = document.getElementById("code-input");
setupLiveReader(resultElement);
}
</script>

function getValue() {
var resultInputValue = document.getElementById("inputValue").value;
document.getElementById("valueShow").innerHTML = resultInputValue;
}
<p id="valueShow">input value is appear here</p>
<input type="text" id="inputValue">
<button onclick="getValue()" type="submit">Get Value</button>

get the text entered in input box using java-script

I'm new to javascript I'm trying to create a web page where we can enter
name in an input box and using javascript's alert method show an alert box which says hello and the name that we entered in the input box
my code is
//html
<input id="test" type="text" name="nm" placeholder="Enter name">
<button onclick="fun(i dont know what to pass here in order to get the text entered in that text box)" type="button" name="button">Click here</button>
//javascript
//i tried like this...first
function fun(x) {
alert("HELLO" + x);
}
//i tried this...then
var x = document.getElementsById("test").value; [->here i also dono what to put.]
function fun(x) {
alert("HELLO" + x);
}

It should be getElementById instead of getElementsById. I hope this helps, and happy learning :)
Your code:
function fun() {
var textInTest = document.getElementById("test").value;
alert("Value entered" + textInTest);
}
<input id="test" type="text" name="nm" placeholder="Enter name">
<button onclick="fun()" type="button" name="button">Click here</button>

My form is not allowing my result to be displayed on click

I have created a simple Grade calculator and I am just working on little things now. One is not allowing the user to not enter an input into the input box. A possible solution to this is to include the html5 required attribute. To use this I had to put my code into a form going by the W3Schools example here.
HTML required Attribute.
Before implementing this into my code it worked fine and it displayed the result on screen. I just want to know why the form is not allowing my results to display on screen.
My code
var Result;
var Worth;
var caPercentage;
var gradeWanted;
var examPercentage;
var gradeWorth;
var marksNeeded;
//Calculates the Continous Assessment result based on users inputs
function calcCaPercentage() {
//result equals the users Continous Assesment results input value
Result = parseFloat(document.getElementById("caResult").value);
//result equals over Continous Assesment Worth input value
Worth = parseFloat(document.getElementById("caWorth").value);
caPercentage = Worth * (Result / 100);
//CA Percentage result gets displayed here
document.getElementById("caPercentage").innerHTML = caPercentage + "%";
//Returns the Continous Assessment Precentage for the other methods
return caPercentage;
}
//Calcualtes the users exam percentage needed to get the grade they want
function calcExamPercentage() {
//GradeWanted equals the grade the user wants
gradeWanted = parseFloat(document.getElementById("gradeWanted").value);
//x equals the Continous Assessment Precentage from the calcCaPercentage
function calcExamPercentage(){
var x = calcCaPercentage();
examPercentage = gradeWanted - x;
//Exam Percentage gets displayed here
document.getElementById("examPercentage").innerHTML = examPercentage +"%";
//Returns the Exam Precentage for the other methods
return examPercentage;
}
//Calculates the Marks needed for the user to get the grade they want
function calcMarkNeeded() {
//gradeWorth equals what the overall Exam worth input
gradeWorth = parseFloat(document.getElementById("gradeWorth").value);
//y equals the Exam Precentage from the calcExamPercentage function
var y = calcExamPercentage();
//marksNeeded equals a round up version of the overall result
marksNeeded = Math.floor((y / gradeWorth) * 100 /1);
//The marks needed will be displayed here
document.getElementById("marksNeeded").innerHTML = marksNeeded + " Marks!";
}
<form>
<div class="container">
<div class="box boxInput1">
<h4>Calculate your CA Percentage</h4>
<p>Enter your CA Result: <input type="text" class="inputBox" placeholder="Enter you CA Result here.." id="caResult" required></p>
<p>Enter overall CA mark: <input type="text" class="inputBox" placeholder="Enter what the CA is worth here.." id="caWorth" required></p>
<!--
<button type="submit" class="btn" onclick="calcCaPercentage()">
<input type="submit" class="btn" onclick="calcCaPercentage()">
-->
</div>
<div class="box boxResult boxInput1">
<p><br>Your CA percentage is: <br><br><span id="caPercentage"></span></p>
</div>
<div class="box ">
<h4>Calculate the percentage needed to pass the exam!</h4>
<p>Enter the Grade you are aiming to achieve: <input type="text" class="inputBox" placeholder="Enter the Grade you want to get here.." id="gradeWanted" required></p>
<!--
<button type="button" class="btn" onclick="calcExamPercentage()">Calculate</button>
<input type="submit" class="btn" onclick="calcExamPercentage()">
-->
</div>
<div class="box boxResult">
<p><br>Percentage you need to pass the exam is: <br><br><span id="examPercentage"></span></p>
</div>
<div class="box">
<h4>Calculate the marks needed to pass the exam!</h4>
<p>Enter what your exam is worth overall: <br> <input type="text" class="inputBox" placeholder="Enter what the exam is worth here.." id="gradeWorth"></p>
<input type="submit" class="btn" onclick="calcMarkNeeded()" required>
<!-- <button type="button" class="btn" onclick="calcMarkNeeded()">Calculate</button> -->
</div>
<div class="box boxResult">
<p><br>You Need <br><br><span id="marksNeeded"></span></p>
</div>
</div>
</form>
Here is a link to my code working in Codepen
Is this a drawback to using forms ?

Just change <input type="submit" class="btn" onclick="calcMarkNeeded()" required> into <input type="button" class="btn" onclick="calcMarkNeeded()"> or <button class="btn" onclick=calcMarkNeeded()">Calculate</button>.
Submit buttons will submit the form to whatever ( server ) action the form defines.
But there's no server listening for your submit, so your website will just load an empty page instead of the form submit response. And an empty page does not contain the output div you're trying to write the result to.
So never use <input type="submit"> unless you actually want to submit a form.
There's <input type="button"> and even a <button></button> element to use instead.
Also, using the required attribute on a button doesn't do anything. Buttons are to be pressed, not submitted. You can't "force" a user to press the button by using required, like you can "force" a user to fill in a particular input.

How do i create a simple Javascript Program that displays the value of <input type="text">?

I am new to javascript, and i only know c++ so far, but i know the logic but i just don't know the syntax on javascript
so i have this form :
<span>Please type your name here: </span>
<input id="inputname" type="text" value=""></input>
when the user types his/her name how do i save the value to some variable and display it with javascript?
i have already tried using
function displayName(){
var username = getElementById("inputname").value;
document.write(username);
}
and i put
<script>displayName();</script>
below the form. it doesn't seem to work, how do i do it?
and how do i use:
<input type="submit"></input>
in relation to it?

Try this,
Javascript
function displayName(){
var username = document.getElementById("inputname").value;
document.getElementById("msg").innerHTML = username;
}
HTML
<span>Please type your name here: </span>
<input id="inputname" type="text" value=""></input>
<input type="button" onclick="displayName();"></input>
<span id="msg"></span>
By changing onclick="return displayName()" to onkeypress="displayName()" you will be able to see the changes on the spot.

change your html and js like this. onblur function call when user leaves the input from focus. get the enter value onblur
<span>Please type your name here: </span>
<input id="inputname" type="text" onblur="displayName();" value=""></input>
js
function displayName(){
var username = document.getElementById("inputname").value;
document.write(username);
}

you need to change your fucntion little bit..
getElementById() is not a direct function in javascript..use it with document object
function displayName(){
var username = document.getElementById("inputname").value;
document.getElementById("msg").innerHTML = username;
return false;
}
on submit click
<input type="submit" id="btnSave" onclick="return displayName();" value="Save" />
<div id="msg" > </div>