We Keep Coding

How can I access form input from an input field which was created dynamically via a Javascript function?

I'm new to programming and hope you can help me out with this little number comparison game that I'm trying to build.
I have two functions. The first function creates the playing field in HTML via a button press. One of the elements created on the playing field is an input field where the player can enter their guess.
In the second function I compare two numbers - the one that was generated randomly and the one that was input by the player. Unfortunately I can't access the number which was entered by the player.
Maybe someone has got an idea. Thank you very much.
This is what the functions look like:
function startGame(){
(...)
const inputField = document.createElement("input");
inputField.setAttribute("type", "number");
inputField.setAttribute("id", "guess");
document.getElementById("guess").appendChild(inputField);
}
function compareInput(){
let inputValue = document.getElementById("guess").value;
(...)
}

You're trying to append "guess" to itself. That doesn't work like that. Try to append it to another div or body.
You have two elements with the same ID.
The first is the wrapper and the second is the input. Hence ur function compareInput() is trying to get the value of the wrapper.

I implemented a proof-of-concept, which probably differs from your requirements, but it should help you finding the right path. First, let's make sure that the new field has a value. Next, make sure that we append it to document rather than itself.
function startGame(){
const inputField = document.createElement("input");
inputField.setAttribute("type", "number");
inputField.setAttribute("id", "guess");
inputField.value = parseInt(Math.random() * 10) + 1;
document.body.appendChild(inputField);
}
function compareInput(){
let inputValue = document.getElementById("guess").value;
console.log(inputValue);
}
startGame();
compareInput();

How to log the inputs made by the user in a textarea?

I have a form with a textarea input field. The primary objective is to strip down all the characters other than alphabets and digits from the input text and return the results in a div. I accomplish that with the following code:
$(document).ready(function () {
$('#input').keyup(function () {
var value = $('#input').val();
var replaced = value.replace(/[^\da-z]/gi, '').toLowerCase();
$('#output').val(replaced);
});
});
All of this works perfectly, and the results are updated real time as the user enters the input text. What I want to do is to log the input text after the user has entered the input text.
I'm performing the logging by sending the input text to a PHP script using $.get. So if I perform the GET inside the .keyup(function () { ... } block, it will send a GET request for each and every character entered.
For example, if the input is hello, then the logging will be peformed as follows:
h
he
hel
hell
hello
I only need the last part to be logged. I was thinking to perform the logging every X seconds and have the PHP script check if the input is valid. I'm new to programming, so I'm not sure how to do this.
What's a good way to accomplish this? I'm not looking for code to copy paste, so just the suggestion/approach is fine too.

Use the blur event:
$(document).ready(function () {
$('#input').keyup(function () {
var value = $('#input').val();
var replaced = value.replace(/[^\da-z]/gi, '').toLowerCase();
$('#output').val(replaced);
});
$('#input').blur(function(){
//send data
});
});
http://api.jquery.com/blur/

Dice jQuery - random # + replace the text on die

My very first question. I have a feeling this is something simple, but it's been driving me crazy because I can't find the issue. I've tested the math function with an alert, so I can see that is working but the actual jQuery below doesn't seem to be running to swap the text. Please help!
var dice = 1;
function math(sides){
return Math.floor((Math.random()*sides)+1).toString();
}
$(document).ready(function(){
$("button").click(function(){
var dice = math(6);
alert("Dice now at " + dice);
$("#number").text("dice");
});
});

dice is a variable, so remove quotes
Try this
$("#number").text(dice); // This will replace the current text with new
If #number is text box
$("#number").val(dice); // This will replace the current value with new

Create a time interval that will cause a function to run at a random time in JavaScript

I am trying to load a random image at a random time. For some reason this is not randomizing the time, though it does randomize the image. Any ideas what's wrong?
var randomTime2 = 3000; //initialize the random time with this value to start
setInterval(function(){
var randomNum = Math.floor((Math.random()*3)+1);//random num for image
$('.recent-project2 img').fadeTo('slow',0,function(){
var randomImg = "img/recent-projects-"+randomNum+".jpg";
$('.recent-project2 img').attr('src',randomImg);
$('.recent-project2 img').fadeTo('slow',1);
});
randomTime2 = Math.floor(Math.random()*10000);//reset random time
return randomTime2; //return random time
},randomTime2);

Use setTimeout and re-trigger at the end of the function with a random time.

The setInterval call will just add your function and the required interval to an internal table to remember to call your code when the expected delay period passed. Note however that even if you change the variable used to specify the interval this will have no effect on the internal table: that value has been read when you called setInterval and it's now stored.
To randomize the callback time give your function a name and just use setTimeout instead of setInterval:
function MyCallback() {
...
setTimeout(myCallback, new_delay);
}
setTimeout(myCallback, first_delay);
with this approach at each call you can decide a different delay before next call.

You can't change the value of randomTime2 inside the function as it's pass by value, not reference.
setInterval(someFunction, someNumberValue)
This line of code will call someFunction every someNumberValue-miliseconds. The value is not updated dynamically.
There's lots of ways you could make this work, but I suggest simply using setTimeout and making the end of someFunction call it again. For instance:
//psudo-code, might not actually run, just showing you the general idea.
var someFunction = function(){
console.log("Whatever.");
}
var repeatFunction = function(){
someFunction()
var timeoutID = window.setTimeout(repeatFunction, Math.random()*10000);
}
repeatFunction(); //Starts the loop.

stop previous event when next one on the same is fired

searchBox.live('input', function(){
//search in a json object
//update the dom based mathes
});
How do i stop the previous search when a new input is entered in the searchbox

I guess your goal is to search only after user finished typing, right? In such case delay the actual execution of the search in this manner:
var searchTimer = 0;
searchBox.live('input', function(){
window.clearTimeout(searchTimer);
searchTimer = window.setTimeout(function() {
//search in a json object
//update the dom based mathes
}, 500);
});
This will trigger the search half a second after user entered input and cancel all previous calls.

You could try looking at underscores debounce function. You pass it the function and a wait millisecond value and it returns a "debounced" version of the function that queues up incoming function calls and executes the last one in the queue after wait ms.