The input value I enter does not show up in JavaScript - javascript

I am writing a text based game for a college competition and am very new to JS & HTML DOM. I have successfully created an input, and am trying to test it. However, when I type into the input and press enter nothing is logged onto the console...
function new_input(){
let input = document.createElement("INPUT");
input.setAttribute("type", "text");
input.setAttribute("id", "input");
document.body.appendChild(input);
let x = $("input").val();
console.log(x);

You do need to handle the click with the help of a callback.
When wanting to do so use the following code instead of the last two lines
input.onkeypress = (e) => {
if(e.keyCode === 13) {
console.log(input.value);
}
}

Related

How to stop keydown event being stuck?

I expect the behavior of the program listed below to be like this:
I click on the input.
I press enter.
The line "Press Enter once again" appears.
I go out of input by clicking somewhere on the page.
I press Enter.
Then the line "You have pressed Enter 2 times" appears.
The real behavior of this program:
I click on the input.
I press enter.
The lines "Press Enter once again" and "You have pressed Enter 2 times" appear.
I have 2 questions:
1) What is the reason for that? I have pressed Enter only once.
2) How to make this program behave the way I expect it to behave?
let input = document.createElement("input");
input.value = "Click on this field and press Enter";
input.addEventListener("keydown", function(){
if(event.keyCode === 13){
let div2 = document.createElement("div");
div2.innerHTML = "Press Enter once again";
document.addEventListener("keydown", function(){
if(event.keyCode === 13){
let div3 = document.createElement("div");
div3.innerHTML = "You have pressed Enter 2 times";
document.body.appendChild(div3);
}
});
document.body.appendChild(div2);
}
});
document.body.appendChild(input);
Let's break this down. What is happening is that your if condition is immediately checking if the key was pressed, and it has been so e.keyCode is always 13.
The easiest method to solve this is with the following bit of code:
let input = document.createElement("input");
let isPressed = false;
input.value = "Click on this field and press Enter";
document.addEventListener("keydown", function(e) {
if (event.keyCode === 13 && isPressed) {
let div3 = document.createElement("div");
div3.innerHTML = "You have pressed Enter 2 times";
document.body.appendChild(div3);
}
});
input.addEventListener("keydown", function(e){
event.stopPropagation()
if(event.keyCode === 13){
if ( isPressed ) {
return;
} else {
let div2 = document.createElement("div");
div2.innerHTML = "Press Enter once again";
isPressed = true;
document.body.appendChild(div2);
}
}
});
document.body.appendChild(input);
You can try that out here. You can refractor this to your liking. :)
Keeping your original code in mind, here is the updated version.
To understand how this bit works, it's simple: when there is an event in element a and the wrapper for that element is b, the event travels up through a process known as event bubbling (because bubbles rise up).
Due to that, the second event listener, on the document, gets executed.
To stop that from happening, you can use .stopPropagation() on the event object.
There were a couple of things going on here. You were attaching the listener twice, the second time on the whole document, this event then got triggered instantly when the event bubbled. You didn't need to use two different elements for the message either, if you keep track of if enter was pressed. You should also use textContent over innerHTML for security reasons :)
Here is the code rewritten
let enterHasBeenPressed = false;
let input = document.createElement("input");
input.value = "Click on this field and press Enter";
input.addEventListener("keydown", function(){
if(event.keyCode === 13){
onEnterPressed();
}
});
document.body.appendChild(input);
let text = document.createElement("div");
document.body.appendChild(text);
function onEnterPressed() {
if (!enterHasBeenPressed) {
text.textContent = "Press Enter once again";
enterHasBeenPressed = true;
return;
}
text.textContent = "You have pressed Enter 2 times";
}
https://codepen.io/anon/pen/wbjojR

Google Map API dropdown Onchange event Listener

I've a google map and i want to trigger a function whenever i select value from dynamic drop down . For that i added a listener and submitted the form like below.
var input = document.createElement('input');
input.setAttribute('type', 'text');
input.setAttribute('id', 'pac-input');
input.setAttribute('class', 'controls');
input.setAttribute('placeholder', 'Search By Area');
input.addEventListener("change", function(event) {
checkInputKey_map(event, $(this));
});
In checkInputKey i'm sending ajax to controller with the selected value , but in post request parameter going is not the full name which was selected . instead it's the keywords written to get the places . while i want full search names to be sent . any help will be appreciated
update
function checkInputKey_map(event,this) {
if ((event.keyCode == 13 || event.type == 'change') && $("#API_source_map").val() == 'yelp_places') {
searched_place = $('#pac-input').val();
console.log(searched_place);
}
}
It feels good but annoying always to post answer to your own question . but all things apart . I made a trick and i applied the same listener to the input but with a delay of one second . My final code is like below
var input = document.createElement('input');
input.setAttribute('type','text');
input.setAttribute('id','pac-input');
input.setAttribute('class','controls');
input.setAttribute('placeholder','Search By Area');
input.addEventListener("change", function(event){
setTimeout(function() {
checkInputKey_map(event, $(this));
},1000);
});

Javascript activeElement doesen't work for dynamically created text-fields

I'm trying to create dynamically text fields when some text is entered to the text field. At first it created new textfield after every keystroke, but i tried to narrow it down so it would create one text-field per text-field.
To explain with a brief example, what i want to get is that in the beginning i have textfield A. If something is typed in textfield A then textfield B is created under textfield A. If something is typed in textfield B then textfield C is created under textfield B, and so on until the user leaves the last one empty.
What's wrong is the activeElement does not get chosen for dynamically created element. My idea was that when another textfield gets selected it will become (should've become) an activeElement with a length of a zero thus changing createNew to true and allowing it to create new textfield.
I hope i explained clearly what i'm trying to achieve, but English is not my mother-tongue so it's a bit difficult. I may be approaching this problem with a bad perspective so if someone has a better idea how to create text fields dynamically i'm open to different options. I did some googling before and didn't find much about that particular idea.
Anyways, here's my js.
//This is the javascript for the namepage.html
var createNew = true;
function getNewInsertion() {
var container = document.getElementById("inputcontainer");
if (document.activeElement.value.length == 0 && createNew == false){
createNew = true;
}
else if (createNew == true){
createNew = false;
var input = document.createElement("input");
input.type = "text";
input.className = "form-control text-controller"; // set the CSS class
input.placeholder = "Sisesta siia nimi";
container.appendChild(input);
}
return createNew;
}
$(function() {
$(".text-controller").bind("paste cut keydown",function(e) {
getNewInsertion();
})
});
You should delegate the event on the container:
$(function() {
$("#inputcontainer").on( "paste cut keydown", "input", function(e) {
getNewInsertion();
})
});
Here I leave you a snippet:
var createNew = true;
function getNewInsertion() {
var container = document.getElementById("inputcontainer");
if (document.activeElement.value.length == 0 && createNew == false){
createNew = true;
}
else if (createNew == true){
createNew = false;
var input = document.createElement("input");
input.type = "text";
input.className = "form-control text-controller"; // set the CSS class
input.placeholder = "Sisesta siia nimi";
container.appendChild(input);
}
return createNew;
}
$(function() {
$("#inputcontainer").on( "paste cut keydown", "input", function(e) {
getNewInsertion();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inputcontainer">
<input type="text" class="text-controller" />
</div>

How to reset the oninput() html event after first use?

I have a db search form with multiple fields. Two of them, job_id and job_desc, I want to be disabled when the other one is used and vice versa. I have written a small Javascript function to do this.
Here is my form code:
<input type="text" id="job_id" oninput="input('job_id','job_desc')" onblur="blur('job_id','job_desc')">
<textarea id="job_desc" oninput="input('job_desc','job_id')" onblur="blur('job_desc','job_id')"></textarea>
Here is my Javascript code:
function input(a,b)
{
var a = document.getElementById(a);
var b = document.getElementById(b);
alert("This will disable "+b); // Let the user know we are disabling the other field
b.value = ""; // Empty the other field
b.disabled = true; // Disable the other field
}
function blur(a,b)
{
var a = document.getElementById(a);
var b = document.getElementById(b);
if(a.value = "") // If the field is empty...
{
b.disabled = false; // Enable the other field.
}
}
I have these problems:
1) For some reason my second field does not re-enable once the first field is empty and blurred. This leads me to believe the onblur() event is not working.
2) Once I type in some text, I get the alert once and it's all good. However, when I empty the field and the re-input some text, the alert doesn't trigger a second time. How do I reset the oninput() event?
Here is my fiddle: fiddle
You can use the "onkeyup" event instead of the other events:
The HTML Code would be :
<input id="job_id" onkeyup="input('job_id','job_desc')">
<br>
<textarea id="job_desc" onkeyup="input('job_desc','job_id')"></textarea>
And the JS funciton :
function input(a, b) {
var ea = document.getElementById(a); // We put A in a variable
var eb = document.getElementById(b); // We put B in a variable
if(ea.value != ""){ // If the element have a value / text in it
if(!eb.disabled) // we check if the other element is disabled, if not, we trigger the alert
alert("This will disable " + b); // Let the user know we are disabling the other field
eb.value = ""; // Empty the other field
eb.disabled = true; // Disable the other field
}else{ // if the element's value is empty (which means that we have erased the existing value)
alert(b + " is now enabled"); // Let the user know we are enabling the other field
eb.disabled = false; // We re-enable the field
}
}
It will work fine on all the browsers..
I hope it will help you !
Besides the solution provided, the reason your code did not work is it was conflicting with a native blur() function on the window object, and so your blur call was calling that instead of your own blur function. You need to change its name.
Another issue once you fix that is in
if(a.value = "") // If the field is empty...
it should have two = signs for comparison.
if(a.value == "") // If the field is empty...
Demo at http://jsfiddle.net/q11m3ahz/6/

Get input value when clicking on button in JavaScript

I knew how to fix this but right now I just don't remember. What I am doing is dynamically create two input elements: a text-box and a button. When I press on the button I want an alert with the text-box's value
var Form = {
Create: function() {
var Input = document.createElement('input');
Input.type = 'text';
document.body.appendChild(Input);
var Button = document.createElement('input');
Button.type = 'button';
Button.value = 'Show Value';
document.body.appendChild(Button);
Button.onclick = function() {
alert(Input.value);
}
}
}
window.onload = function() { Form.Create(); }
When I click on the button I get an empty message, even if the text-box contains text. So, I want the function to get the content of the text-box in real-time but I just don't know how this was done.
it seems that you are appending an other button
change this line :
document.body.appendChild(LoginButton);
by this:
document.body.appendChild(Button);

Categories

Resources