Develop Reference

JS Input keypress event - Cannot read property 'addEventListener' of null [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 years ago.
I have created a search function for my Site and originally just had it set up as a Form Element using POST to send the variable to my search page. However, this would just give me a plain URL at search.php. So if the clicked on something and then went back there would be no posted variable so no more search results.
I wanted to improve this so if they click on something and go back it will be going back to the URL of search.php?term=search%20term which will then treat it as a GET variable so it will show the results again and it can be used to go search for something directly in the URL bar.
(NOTE: I have rewrite rules to change search.php?term=search%20term to search/search%20term. I also have two search bars one displayed for mobile and one for desktop)
So I changed my code to the following:
function search(x){
if(x=="search"){
var search_term = document.getElementById('searchbox').value;
}else if(x=="mini_search"){
var search_term = document.getElementById('minisearchbox').value;
}
if(search_term != ""){
window.location.href = "search/"+search_term;
}
}
<div id="search">
<input type="text" placeholder="Product Search" name="search" id="searchbox">
<input type="image" src="media/search.png" class="search_button" name="search_button" onclick="search('search'); return false;">
</div>
<div id="minisearch">
<input type="text" placeholder="Product Search" name="search" id="minisearchbox">
<input type="image" src="media/search.png" class="search_button" name="search_button" onclick="search('mini_search'); return false;">
</div>
This is working fine as expected but obviously now with the return false statement it won't search when a user presses enter which I want them to be able to do.
So I tried adding the following code:
document.getElementById('searchbox').addEventListener('keypress', function(key){
if(key.keycode==13){
search(search);
}
});
document.getElementById('minisearchbox').addEventListener('keypress', function(key){
if(key.keycode==13){
search(mini_search);
}
});
However, I now get the error saying Uncaught TypeError: Cannot read property 'addEventListener' of null and I am not sure what could be causing this.

If an element with that ID definitely exists, then the script might be running before the DOM has loaded.
Try wrapping the code in:
document.addEventListener("DOMContentLoaded", function(event) {
// Your code here
});

You may have done it incorrectly, try this, you have to pass string in quotes, you missed that part
var _search = document.getElementById('searchbox');
_search.addEventListener('keypress', function(key){
if(key.keyCode==13){
search('search');
}
});
var mini_search = document.getElementById('minisearchbox');
mini_search.addEventListener('keypress', function(key){
if(key.keyCcode==13){
search('mini_search');
}
});
function search(x){
if(x=="search"){
var search_term = document.getElementById('searchbox').value;
}else if(x=="mini_search"){
var search_term = document.getElementById('minisearchbox').value;
}
if(search_term != ""){
console.log(search_term);
window.location.href = "search/"+search_term;
}
}
<div id="search">
<input type="text" placeholder="Product Search" name="search" id="searchbox">
<input type="image" src="media/search.png" class="search_button" name="search_button" onclick="search('search'); return false;">
</div>
<div id="minisearch">
<input type="text" placeholder="Product Search" name="search" id="minisearchbox">
<input type="image" src="media/search.png" class="search_button" name="search_button" onclick="search('mini_search'); return false;">
</div>

how to convert input text to uppercase while typing using javascript

In Below code, I want to change the input field to uppercase dynamically i.e. while entering the letters.
I know the style option i.e. text-transform but I want to do it using javascript.
I am practicing javascript concepts and as a part of learning, I want to do it.
<html>
<body>
<input type="text" size="40" id="name" name="name">
</body>
</html>

var upCase = getElementById('id').value.toUpperCase();
document.getElementById('id').value = upCase;
I believe you can just call the .toUpperCase() function on the innerHTML of the class or id you are trying to select. If you are using a class you can use .getElementsByClassName().
Edit:
I missed onKeyUp, this: onkeyup="this.value = this.value.toUpperCase();"
should work if you only want to use this in the one place.

You need to look the following post
Change Input to Upper Case

You can combine onkeyup event:
https://www.w3schools.com/jsref/event_onkeyup.asp
With toUpperCase method:
https://www.w3schools.com/jsref/jsref_touppercase.asp

How about this:
$("#input , #textarea").on('input', function(evt) {
var input = $(this);
var start = input[0].selectionStart;
$(this).val(function (_, val) {
return val.toUpperCase();
});
input[0].selectionStart = input[0].selectionEnd = start;
});
http://jsfiddle.net/22Jap/

Actually I got the answer but i dint found any answer like this thats why I have asked this question.
Thanks for your reply guys..
Below is the answer:
<!DOCTYPE html>
<html>
<body>
<input type="text" size="40" id="name" oninput="convertToUpperCase()">
<!-- Vishal Biradar-->
<script>
function convertToUpperCase(){
var name=document.getElementById("name").value;
if(name!=""){
name=name.toUpperCase();
}
document.getElementById("name").value=name;
}
</script>
</body>
</html>

I'm wondering why there is no answer here.
There is a css that answers your question
text-transform: uppercase
You just need to add that style to your text input.
<input type="text" name="LastName" style="text-transform: uppercase;">

function converttoUpperCase(e)
{
var pPosition = e.target.selectionStart;
e.target.value=e.target.value.toUpperCase();
e.target.selectionStart=pPosition;
e.target.selectionEnd=pPosition;
}
function checkOnInput(e)
{
if(hasLowerCase(e.target.value))
converttoUpperCase(e);
}
function hasLowerCase(str)
{
return (/[a-z]/.test(str));
}
<input oninput="checkOnInput(event);" type="text" size="40" id="name" name="name">

ES6 push and bind to an array

Please pardon my newbie verbiage here while I attempt to explain my problem (also I did search and came up with nothing, I'd also like to use ES6, not jQuery)
I'm trying to have a text input that when entered it's pushed into an empty array. When more input is entered in, I would like to have that bound to the array as well.
So I have it working, kinda. I can get one thing in the array but I can't seem to anything else to go in there. Here's what I have so far:
My html:
<input type="text" class="theplayer pre" name="Player" id="bind" placeholder="Enter Names" onclick='javascript: this.value = ""' />
My JS:
let namesOfPlayers = [];
const currentValue = document.getElementById("bind").value;
namesOfPlayers.push(currentValue);
//I don't know how to add in another text/value here
console.log('namesOfPlayers', namesOfPlayers);
I don't know if I'm supposed to be doing a for each here or if there's a way to bind another value into the array.
Thanks and much appreciated for letting me try to clumsily explain this.

You can include <input type="button"> element as sibling of <input type="text"> element. At click on <input type="button"> .push() .value of <input type="text"> to array
<input type="text"
class="theplayer pre"
name="Player"
id="bind"
placeholder="Enter Names" />
<input type="button" value="click" />
<script>
let namesOfPlayers = [];
let input = document.getElementById("bind");
let button = input.nextElementSibling;
button.addEventListener("click", function() {
namesOfPlayers.push(input.value);
console.log(namesOfPlayers);
});
</script>

Why this code is not generating any alert message

Here i have written some that is for validation on form in html and javascript
<!DOCTYPE html>
<html>
<body>
<form name="registration">
<input style="font-size:16px;" type="text" name="Name" placeholder="Full Name" onchange="checkName()" required />
</form>
<script>
function checkName()
{
var uname=document.registration.Name.value;
var letters = /^[A-Za-z]+$/;
if(uname.value.match(letters))
{
alert('fg');
}
else
{
alert('Username must have alphabet characters only');
//uname.focus();
}
}
</script>
</body>
</html>
Please describe why it is not working?

The problem is that you're trying to get the value property TWICE. Like such:
var uname=document.registration.Name.value;
if(uname.value.match(letters))
Your uname variable already contains the value, so you don't need to get it again. Change your if statement to this...
if (uname.match(letters))
And it works just fine :)

Using onchange with input type = "text" is quite uncommon
onchange event usually occurs only after you leave (blur) the control.
onchange is mainly associated with change of select element.
For your case it is better to use keydown, keyup and keypress events as well.
HTML
<input style="font-size:16px;" type="text" name="Name" placeholder="Full Name" onkeyup="checkName()" required />
Jsfiddle

Populating paragraph with text from object in loop

I have a form form that either has input/select fields in form when account status is active, in this state you are able to add/edit user info, in another state Frozen, I would use the same view but replace the input and select fields with paragraph tags <p class="form-control-static"> for read-only purpose. I am populating the field when entering to EDIT mode with jQuery:
function fillFormFromObject(form, obj) {
form.find("input, select").each(
function (i, el) {
console.log(el);
$(el).val(obj[el.name]);
}
);
}
Now in paragraph case, how can I set the text for it from the object as well? Getting lost in here. I know that for paragraph element I would call text() method. But what would I pass in?

This is a proposal for a partial Answer. It includes some of the desired features, and doesn't include some others (which probably could be worked out with some experimenting).
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>test-page</title>
<script type="text/javascript">
//<!--
var f="i";
function inpdisp()
{ var d, i, x
for(x=0; x<4; x++)
{ if(x<10) //HTML code is ready for up to 100 input-fields/spans
i="0"+x;
else
i=x.toString();
d=document.getElementById("i"+i);
d.hidden = (f=="i" ? true : false);
// d.value="new value"+i; //uncomment when filling data from Server
d=document.getElementById("s"+i);
d.hidden = (f=="i" ? false : true);
// d.innerHTML="new value"+i+","; //uncomment when filling data from Server
}
f = (f=="i" ? "s" : "i");
return;
}
// -->
</script>
</head>
<body onload="inpdisp();">
<input type="button" value="inputs/displays" onclick="inpdisp();" />
<p><input id="i00" type="text" size="20" maxlength="30" value="data00" /><span id="s00">data00,</span> Type of data 00</p>
<p><input id="i01" type="text" size="20" maxlength="30" value="data01" /><span id="s01">data01,</span> Type of data 01</p>
<p><input id="i02" type="text" size="20" maxlength="30" value="data02" /><span id="s02">data02,</span> Type of data 02</p>
<p><input id="i03" type="text" size="20" maxlength="30" value="data03" /><span id="s03">data03,</span> Type of data 03</p>
</body>
</html>
That inpdisp() function is tied to a button only for "show" here. You would eliminate the button and call the function using some other criteria, in your version of this page. You will probably NOT want to modify the f variable inside the inpdisp() function, but do it elsewhere.