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);
Related
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);
}
}
I have a input where a user can input text and when the user presses enter on their keyboard, it will click the button 'Go!' which should then make the 'Create Div' button appear. And a div is created with the user's inputted text, when they click the 'Create Div' button. But I want this button to be clicked also when the user presses enter. Thus when the user presses 'Enter' the first time, it will click the 'Go!' button which will make the 'Create Div' button appear and then when the user presses 'Enter' the second time ( or preferably when the 'Create Div' button is shown on the screen) then the actual div will be created with the user's inputted text.
I tried doing this in Javascript, by using an IF statement but right now when I press 'Enter' the first time to trigger the 'Go!' button, it automatically triggers the 'Create Div' button and the div appears right after the first 'Enter' is pressed (uncomment the last bit of my JS code to see what I mean) What should I change to get my desired result?
var button = document.getElementById("button");
var createbutton = document.createElement("button");
var creatediv = document.createElement("div");
button.addEventListener('click', function(){
createbutton.innerHTML = "Create Div";
createbutton.style.display = 'inline-block';
document.getElementById("body").appendChild(createbutton);
});
createbutton.addEventListener('click', function(){
createbutton.style.display = 'none';
var input = document.getElementById("input").value;
creatediv.innerHTML = input;
document.getElementById("body").appendChild(creatediv);
});
document.onkeydown = function(event){
if(event.keyCode == 13){
button.click();
}
}
/*if(createbutton.style.display = 'inline-block'){
document.onkeydown = function(event){
if(event.keyCode == 13){
createbutton.click();
}
}
}*/
<body id="body">
<input type="text" id="input" placeholder="Text goes here">
<button id="button">Go!</button>
</body>
You can give your createbuttonand ID and check if the element is inside the DOM
when enter is pressed:
var button = document.getElementById("button");
var createbutton = document.createElement("button");
var creatediv = document.createElement("div");
button.addEventListener('click', function(){
createbutton.innerHTML = "Create Div";
createbutton.style.display = 'inline-block';
createbutton.id = 'createButton';
document.getElementById("body").appendChild(createbutton);
});
createbutton.addEventListener('click', function(){
createbutton.style.display = 'none';
var input = document.getElementById("input").value;
creatediv.innerHTML = input;
document.getElementById("body").appendChild(creatediv);
});
document.onkeydown = function(event){
if(event.keyCode === 13) {
if(document.getElementById('createButton')) {
createbutton.click();
} else {
button.click();
}
}
}
<body id="body">
<input type="text" id="input" placeholder="Text goes here">
<button id="button">Go!</button>
</body>
In cross-browser Javascript, how to get an event after the value of an <input> element is changed because of a text being dragged and dropped into the field?
input.addEventListener("change", cb); // Is not triggered on drop
input.addEventListener("drop", cb); // Is triggered before the value change
A snippet to demonstrate the problem:
let input = document.getElementById('input');
let button = document.getElementById('button');
let div = document.getElementById('div');
function log(msg) {
let el = document.createElement('pre');
el.textContent = msg;
div.appendChild(el);
}
input.addEventListener("change", function() {
log("CHANGE: " + input.value);
});
input.addEventListener("keyup", function() {
log("KEYUP: " + input.value);
});
input.addEventListener("drop", function() {
log("DROP: " + input.value);
});
button.addEventListener("click", function() {
log("CLICK: " + input.value);
});
log("Try dragging text into the input field");
<input id="input"></input>
<button id="button">Click</button>
<div id="div"></div>
You can get the text value of the dropped data with the getData method:
// This will get the current data value dropped as a string
event.dataTransfer.getData("text");
and prevent this same value to be set in the input with:
// This will prevent the input to be changed with the dropped data
event.preventDefault();
So the full event handler would be like this:
input.addEventListener('drop', function (event) {
event.preventDefault();
var textData = event.dataTransfer.getData('text');
// do whatever you want with the the text data
});
So instead of trying to get the input value at the right moment, you can intercept the data from the drop event and do stuff with it. You could even set it as text later.
Let me know if it solves your problem.
I have created radio button is created on client side and when I click it, it should show my existing div i.e. ifPrint
Please have a look at code I am trying:
radio button creation:
var optiondiv = document.getElementById('option-div');
document.getElementById('create').onclick = function () {
newopt = document.getElementById('new-option').value;
if(newopt){
var input = document.createElement('input'),
label = document.createElement('label');
input.type = "radio";
input.setAttribute("value", newopt);
input.setAttribute("checked", true);
input.setAttribute("name", "radio-name");
label.appendChild(input);
label.innerHTML += newopt+'<br>';
optiondiv.appendChild(label);
document.getElementById('new-option').value = '';
$.post(
"equipments1.php",
{
"newopt": newopt
},
function(data) {
if(data.success){
alert('Successful Added To dB');
document.getElementById('newopt').checked = false;
// if (document.getElementById('newopt').checked) {
//document.getElementById('ifPrint').style.display = 'block';
//$(#ifPrint).show();
//$(#ifPrint).show();
}else{
alert('Not Add To DB');
}
});
}else{
alert('Please Enter Radio Button Value.');
return false;
}
};
New function for showing Div ifPrint:
$('input[type=radio][name=newopt]').change(function() {
$(#ifPrint).show();
});
Please guide if possible
You need to use click instead of change, and also you missing quotes in your code, and it's better to use "on" than "click" function if element is created after dinamicaly
$('body').on('click','input[type=radio][name=newopt]',function () {
$('#ifPrint').show();
});
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>