Pass html input into a js function? - javascript

I would prefer to accomplish this without inline script. I'd be interested to learn this both with and without jQuery.
After trying several different element selector methods, changing the placement of my script tag, and trying onclick, this is how my code looks.
The console is returning the error "Cannot read property 'addEventListener' of null".
javascript:
document.getElementById("button").addEventListener("click", someFunction(document.getElementById("number").value));
someFunction(){};
Html:
<head>
<script src="nibble.js"></script>
</head>
<body>
<form>
<input type="number" id="number" name="number" ></input>
<input type="button" id="button" name="button" value="Test number"></input>
</form>
</body>
</html>

Your script needs to be placed below the html (or be wrapped in window.onload) in order to find the elements at runtime. Also, your addEventListener is wrong, right now it isn't a function that gets called, but undefined. Try it like this:
document.getElementById("button").addEventListener("click", someFunction);
function someFunction(){
alert(document.getElementById("number").value)
};
HTML:
<head>
</head>
<body>
<form>
<input type="number" id="number" name="number" ></input>
<input type="button" id="button" name="button" value="Test number"></input>
</form>
<script src="nibble.js"></script>
</body>
</html>

Created one fiddle for you. Hope this will be of some help.
http://jsfiddle.net/mfLt7/96/
$(document).ready(function(){
document.getElementById('button').addEventListener('click', someFunction);
function someFunction(){
var value = document.getElementById('number').value;
alert(value);
}
});
Hope this be of some help. Happy Learning

Have a look at this fiddle I just made. The way you are passing someFunction to your addEventListener call is wrong because you are calling the function instead of passing it's reference to the event listener so it can decide to call it on its own.
Here's what the function looks like:
document.getElementById("button").addEventListener("click", someFunction);
function someFunction(){
document.querySelector('.output').innerHTML = document.getElementById("number").value
};

Related

A simple javascript number onchange function

I have a simple bit of javascript code that I think should be working, but it isn't. The idea for now is basically just to change the content of a div when a number has been input to a box. I'll make it do something more complicated later, but I need it to work first.
So I have this HTML page:
<form>
<input type="text" name="here" onkeyup="revChange()" />
</form>
<div name="there"></div>
running with the following javascript:
var revChange = function () {
document.there.innerHTML = "<p>Thing</p>";
};
The result is that nothing happens when I enter anything in the input box, it just stays blank. I've tried using onchange, onkeypress, onblur, onkeyup, I've tried the function with brackets, without brackets, using arguments in the brackets (including this.value), I've tried putting several different things inside the function, I've even tried just calling the function directly from the script. No matter what I do, this function does not seem to want to do anything. I can not work out what is going on, so I would like some explanation if possible. Oh yea, and this is just pure javascript, not jQuery or anything.
document.there.innerHTML is not how you should reference a non form element. Give it an id, and use getElementById
You should change the name attribute on your div to an id, and use getElementById
<script type="text/javascript">
var revChange = function () {
document.getElementById("there").innerHTML = "<p>Thing</p>";
};
</script>
<form>
<input type="text" name="here" onkeyup="revChange()" />
</form>
<div id="there"></div>
this seems to be working at my end
<form>
<input type="text" name="here" onkeyup="revChange(this)" />
</form>
<div name="there" id="das"></div>
<script>
var revChange = function (abd) {
document.getElementById('das').innerHTML = abd.value;
};
</script>
Just change your function to:
var revChange = function (ref) {
document.getElementsByName("there")[0].innerHTML = ref.value;
};
Also change your html to:
<form>
<input type="text" name="here" onkeyup="revChange(this)" />
<div name="there"></div>
</form>
This should work.

JQuery not working on submit button

I am trying to learn some JQuery. I am using an external js to write my code in. It works fine when I call the 2 paragraph functions, but when I call the submit button it just load the page again.
My code looks like this:
<html>
<body>
<p id="paragraf">This is an internal paragraf</p>
Another Example:
<p id="paragraftest">This is the external js script</p>
<form>
<input type="text" name="Submit_test">
<button id="buttontest">Submit</button>
</form>
<script type="text/javascript" src="jqueryScript/jquery.js"></script>
<script type="text/javascript" src="jqueryScript/hide.js"></script>
</body>
</html>
Javascript:
$('#paragraf').click(function() {
$('#paragraf').hide();
});
$('#paragraftest').click(function() {
$('#paragraftest').hide();
});
$('buttontest').submit(function() {
alert("test");
});
/* I have tried with "" and '' in buttontest and test, but still the same */
I have also tried with this, but it is still the same.
<form>
<input type="text" name="buttontest">
<input type="submit" value="">
</form>
Can anybody see why nothing happens?
Best Regards
Mads
Missing id selector - buttontest is the id of the button so you need to use id-selector to select it(prefix with #)
$('#buttontest').submit(function() {
alert("test");
});
Correct this syntax:
$('input[name=buttontest]').submit(function() {
alert("test");
});
Using a unique ID for the button:
$('input#button_id').submit(function() {
alert("test");
});
You should select the button with the following way:
$('#buttontest')
You hadn't used the #, which is required when we are selecting elements form the DOM using their ids. For sure it was a writing error, since you use this correctly on your other selections.
Submit event is a form event, and you are trying to bind it to a button.
$('form').submit(function() {
alert("test");
});
In generally if you want to submit a form you should use dedicated onsubmit form event, not click event on any button.
It works with this code now:
<form id="form">
<input type="text" name="buttontest">
<input type="submit" value="submit">
</form>
<form id="form_1">
<input type="text" name="buttontest">
<input type="submit" value="submit">
</form>
Javascript:
$('#form').submit(function() {
alert("test");
});
$('#form_1').submit(function() {
alert("test");
});

document.getElementById().focus() returning undefined

I have the following HTML:
<input type="text" id="endDateEditBox" value="" style="margin-left:5px; height:18px; width:70px; vertical-align:middle;" onchange="validateDate('endDateEditBox', $(dateFormatErrorString).value)">
And I am trying to make this focus using the following Javascript:
document.getElementById("endDateEditBox").focus();
Which chrome console and Firebug both return as undefined. I feel like I am missing something very obvious here, can anyone help?
The focus() method does not return a value. It sets the focus on the matched input, and then returns undefined...
The Javascript native focus function doesn't return anything.
If you expected to receive the element and use it in concatenation, you're probably confusing it with the jQuery's focus function.
Try this code:
<html>
<head>
<script type="text/javascript">
function setFocus()
{
document.getElementById("endDateEditBox").focus();
}
</script>
</head>
<body onload="setFocus()">
<form>
Date: <input type="text" id="endDateEditBox"><br />
</form>
</body>
</html>

addEventListener for submit event runs handler function early

I'm trying to figure out how to run a chunk of code a few seconds after a user presses a submit button on a form. My test page is waiting the right amount of time and properly executing the chunk of code, but instead of waiting for the submit event, it seems to be starting my timer on page load. It seems like I am not using .addEventListener in the right way; does anyone see my problem? I'm using the latest version of Firefox, not IE6 or anything like that.
<html>
<head>
<title>Listener Test</title>
</head>
<body>
<form id="travelInfo">
Depart: <input type="text" name="depart" value="BWI" id="depart"><br />
Arrive: <input type="text" name="arrive" value="LAX " id="arrive"><br />
<input type="submit" name="submit" value="Send Form" id="Submit">
</form>
<script type="text/javascript">
window.addEventListener('submit', timeFunction(), true);
function timeFunction()
{
var t=setTimeout("handler()",3000);
}
function handler()
{
alert("Hello");
}
</script>
</body>
</html>
Replace
window.addEventListener('submit', timeFunction(), true);
with
window.addEventListener('submit', timeFunction, true);
See the difference between invoking a function and referencing it in my other answer.
Also, instead of doing
setTimeout("handler()", 3000);
which will basically be eval'd when the timeout occurs, you could pass a reference to the handler function directly to setTimeout. Notice the absence of quotes and the parentheses.
setTimeout(handler, 3000);

How to run Javascript codes that are put in a textbox (in HTML5)

I have a textbox on my html page, I'd like to run the javascript code that people put it the textbox. How can I do that?
You can create a new script dynamically like found here
Here's a quick example you can copy and paste into an html file and see it work. You'll notice that once called, the page reloads and stalls out. This could be solved by using ajax and a seperate page the executes the code and returns a value or string or whatever it is your code should return.
<html>
<head>
</head>
<body>
<script>
function doIt() {
var headID = document.getElementsByTagName("head")[0];
var newScript = document.createElement("script");
newScript.type = "text/javascript";
newScript.innerHTML = document.getElementById("textarea").value;
headID.appendChild(newScript);
}
</script>
<textarea name="textarea" id="textarea">
alert("Alert");
</textarea>
<input type="button" value="Do It" onclick="doIt();" />
</body>
<html>
You can use document.getElementsByName
<input name="textbox" type="text" />
<input name="buttonExecute" onclick="execute(document.getElementsByName('textbox')[0].value)" type="button" value="Execute" />
something similar i found here
You could also create a JavaScript function to get the content using jQuery and execute the code you wanted but you must set an id to the textbox
<script>
$("#run").click(function () {
var element = $("input#textbox").val();
//code to execute
}
</script>
<input type="textbox" value="Type something" id="textbox"></input>
<button id="run">Run Code</button>
I think the easiest native JS way to do it is to use a textbox's value attribute and eval() its content, as it doesn't require to create any script elements (that would be sitting there until the page is reloaded) or big constructs:
function runIt() {
eval(document.getElementById('code-input').value);
console.log('Ran code from textbox!');
}
<textarea id="code-input" placeholder="Input any JS code here"></textarea>
<button onclick="runIt()">Run it!</button>
This example is a text box and with every click on the button "Run it!" the text that's inside of it is executed as JavaScript.
In fact this answer is just a complicated way to say: "Just eval() a textbox's value."

Categories