Textbox can't be referenced by id value in js [closed] - javascript

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 4 years ago.
Improve this question
I'm trying to make a simple login form with HTML and CSS, but I'm unable to use document.getElementById() for my textbox.
The following error occurs in the console of my browser:
TypeError: document.getElementbyId is not a function
P.S: I'm a noob at js
My code:
<div id='logon'>
<input type=text placeholder='Username' id='un' style='width:50%; height:10%;'><br>
<input type=password placeholder='Password' id='pw' style='margin-top:2%; width:50%; height:10%'><br><br>
<button id='button' onclick='auth()'>Enter</button><br>
</div>
<script>
function auth(){
var x = document.getElementById("un");
var y = document.getElementbyId("pw");
if(x.value.toString()==="bla" && y.value.toString()==="bla")
document.getElementbyId("invalidd").innerHTML = "<div id='invalid'>Invalid</div>";
else
alert("Welcome!");
}
</script>

Make sure that the b is in upperCase format, like :
document.getElementById
___________________^
console.log(document.getElementById('test_1')); //Valid function
console.log(document.getElementbyId('test_2')); //Invalid function
<span id="test_1">Test 1</span>
<br>
<span id="test_2">Test 2</span>

Related

How to call the same function more than one time using parameters in javascript? [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
<script>
function txtchk(as, tb) {
//as is gonna be an asterisk
//tb is a an input type text
if (document.getElementById(tb).value == "") {
document.getElementById(as).style.display = "block";
}
else {
document.getElementById(as).style.display = "none";
}
}
</script>
So when the tbox is empty, display the asterisk, else don't. The if statement is correct but how do I write the parameter?
<div class="b1">
<h>Book Name:</h>
<h class="astyle" id="asterisk1">*</h>
<div class="b2">
<input type="text" id="tbox1" oninput="txtchk(asterisk1, tbox1)">
//is using on input wrong?
</div>
Here I want the same to happen using the same function but different ids.
<div class="b1">
<h class="b1c">Description:</h>
<h class="astyle" id="asterisk2">*</h>
<div class="b2">
<textarea class="tarea" id="tbox2" oninput="txtchk(asterisk2, tbox2)">
</textarea>
</div>
</div>
Your parameters must be string. Change your oninput like this
oninput="txtchk('asterisk2', 'tbox2')"

The getElementById () method returns null, the script indicated at the end of the document [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
Method getElementById() returns null
I took into account that javascript is executed before loading HTML elements, so I pointed the script at the end of the body tag, but to no avail
<button id="button">Начать программу</button>
<div class="firstArray">Ваши числа: </div>
<div class="newArray">Вывод: </div>
<script>
document.getElementById('firstArray').innerHTML = 'Ваши числа: ' + arr +
'<br>'; // document.getElementById('firstArray') is null
</script>
getElementById() does just that. You don't have an element with that id. You have an element with a class. Use document.querySelector() instead:
<button id="button">Начать программу</button>
<div class="firstArray">Ваши числа: </div>
<div class="newArray">Вывод: </div>
<script>
var arr = "test";
document.querySelector('.firstArray').innerHTML = 'Ваши числа: ' + arr + '<br>';
</script>
You will need to change your <div> to have an id="" rather than a class="". Specify the name of the id with <div id="your_id_goes_here"> ... </div> and target it using the getElementById() method, specifying the id name as the function parameter.

Radio button value displaying JS function doesn't work after legally changing variables names [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I have coded a function showRadioValue() in JavaScript which displays a value of radio button. It perfectly worked. But after I changed names of variables (from radVal to ans6) and function's name to checkQ6() , it mysteriously stopped working! Why? Here is the code:
<html>
<head>
<title>Radio test</title>
</head>
<body>
<h2 style="text-align: center;">Question 6</h2>
<p style="text-align: center;">We _______ two dogs and a cat.</p>
<form name="option" style="text-align: center;">
<input type="radio" name="option" value="have">have<br>
<input type="radio" name="option" value="is having"> is having<br>
</form>
<p style="text-align: center;" ><button onclick="checkQ6();">Test radio</button></p>
<script>
/*
function showRadioValue() { // previous perfectly working function
var radVal = document.querySelector('input[name = "option"]:checked').value;
alert(radVal);
}
*/
function checkQ6() { // the function where just ans6 variable name and function name is changed and which does not work
var ans6 = document.querySelector('input[name = "option"]:checked').value;
alert(ans6);
</script>
</body>
</html>
Your function bracket is not closed. You can see these errors in your browser console.

Javascript - Average calculation [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
Hi I am trying to write a simple calculation that will average the two numbers entered by user input and then click the average button to get the average of the two. MY problem is that it does not produce an answer. Here is the code
<html>
<body>
<input type="text" id="one">
<input type="text" id="two">
<input type ="button" onclick="average()"value="average">
<input type="text" id ="avg">
<script type"text/javascript">>
function average(){
var a=parseInt(document.getElementById("one".value);
var b=parseInt(document.getElementById("two".value);
var afinal=((a+b)/2);
document.getElementById('avg').value=afinal;
}
</script>
</body>
</html>
Typo fix (missing bracket for getElementById):
var a=parseInt(document.getElementById("one").value);
var b=parseInt(document.getElementById("two").value);
and another typo:
<script type"text/javascript">>
should be:
<script type"text/javascript">
so, the final code is:
<html>
<body>
<input type="text" id="one">
<input type="text" id="two">
<input type ="button" onclick="average()"value="average">
<input type="text" id ="avg">
<script type"text/javascript">
function average(){
var a=parseInt(document.getElementById("one").value);
var b=parseInt(document.getElementById("two").value);
var afinal=((a+b)/2);
document.getElementById('avg').value=afinal;
}
</script>
</body>
</html>
Instead of writing the old-school document.getElementById(), consider using an industry-standard, broadly adopted jQuery library, specifically its method called $.
There, you'll be able to use a CSS selector to get to an element that you want. It's extremely powerful, I recommend learning it.
var a = $("#one").val();
It is just a typo fix,
instead of
var a=parseInt(document.getElementById("one".value);
var b=parseInt(document.getElementById("two".value);
the code becomes,
var a=parseInt(document.getElementById("one").value);
var b=parseInt(document.getElementById("two").value);

How to insert <li> element on <ul> using pure javascript [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Improve this question
I am having an issue with javascript and i don't know how to solve it ...
Actually my code is working good with jsfiddle, but when i try to insert on my HTML page ,it simply doesnt work anymore ...
What i want to, is to add the < li> on < ul> each time i tried to hit the button named "Add" !
HTML code:
....
<td width="50%" valign="top">
<b> SUPER: </b>
<ul id="ul">
</ul>
</td>
....
<input type="submit" value="Add" onclick="add()"/>
....
JavaScript code:
<script type="text/javascript">
function add(){
var ul = document.getElementById("ul");
var li = document.createElement("li");
li.innerHTML = "LoL";
ul.appendChild(li);
}
</script>
The result with that code : it doesn't add anything on my HTML page when i try to hit the button...
Thankfully,
May be oversimplifying this, but here's a thought: Your input button is a SUBMIT, so when the onClick performs, the submit happens immediately thereafter, restoring the page to its original state. The process happens so quickly the appearance is that the code did nothing.
Just change the input type to "button", eg
<input type="button">

Categories

Resources