Set variable to input value (jQuery) - javascript

So, I have the following code, and it's not working, and I'm not sure why. Any suggestions?
HTML:
<input type="number" placeholder="#" id="lineSpace"/>
<br/><br/><button id="go">update text!</button>
JavaScript (jQuery)
$(document).ready(function() {
var lineSpace = $("#lineSpace").val();
$("#go").click(function(){
alert("LINE SPACE: "+lineSpace+"");
});
This was a test to see if my variable was being gathered, but it seems not. The alert appears but simply says "LINE SPACE: ", without placing the variable after it. When I define the like this var lineSpace = "random number";(which is no use to me, as I need a value that is entered from the user-side), however, it works fine.

Because you are assigning lineSpace when the page loads, and it's obviously blank then.
Move var lineSpace = $("#lineSpace").val(); into your click handler (above the alert() function call).

Related

input value doesnt show, but in inspector it does

I have input element and string variable called link. And when i try to add this string like a value inside input element.
I tried to do it by :
$("#inputURL").value(**link**)
$("#inputURL").attr('value',**link**)
and also defined at start:
var inputRow = $('<input type="url" id="inputURL" class="input-url-link"value="' + **link** + '">');
But it doesn't show. I have empty input element but when I inspect element, it have value which equal link. And this all running inside of function.
var inputRow = $('<input type="url" id="inputURL" class="input-url-link">');
P.S. when i try do write 1) and 2) code inside of INSPECT in console - it works. But when i wrote the same inside of code - doesnt work
Use val() function so your JQuery will look like this:
$("#inputURL").val(**link**);
If it doesnt work, try:
$("#inputURL").text(**link**);
Reference here
Like #Learner said in his answer, it's $('#id).val() not value().
And I did some simple code to replicate your situation, it works fine.
I'm guessing you should have wrapped your jQuery code in jQuery(function($){})
See here https://jsfiddle.net/calmdown/74wurk50/4/

How to handle variable inside javascript

I am trying to amateurishly create an autocomplete input field with jquery. My first step is to get some results displayed below the input field by calling a php script on keyup with the load function of jquery.
I dont know how silly this attempt is, but i think i am almost there. However, I am stuck during passing the keyup variable to the script. Actually I can passa a variable but i need to use the keyup variable to pass.
For clarity on the question please see the code;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
function getres(){
var x = document.getElementById("cit");
$('#resdiv').load('results.php?cit=x.value');
}
</script>
HTML
<input type="" name="" id="cit" onkeyup="getres()">
<div id='resdiv'></div>
PHP file being called results.php
<?php
if(isset($_GET['cit'])){echo $_GET['cit']."<br>";}
include('connnew.php');
$getprops=$clientdb->query("SELECT * FROM cities ORDER BY DATE LIMIT 6");
while($info=$getprops->fetch_assoc()){
//$results[]=$info['city'];
echo $info['city']."<br>";
}
?>
I m able to get the results in the div below with id resdiv. But the problem is, how do I ensure the value of Var X in the JavaScript function is appended to the load parameter results.php?cit= ?
I get 'x.value' being passed rather than the actual value of x. I think once I do that, eventually I can match the variable to the results array and show matching auto-complete kind of results.
You need to put x.value outside your quotes as that's a variable. You can make your code much shorter than it currently is. You should not have any issues with following way:
$("#cit").on("keyup", function(){
var x = document.getElementById("cit").value;
$('#resdiv').load('results.php?cit='+x.value);
});//
<input type="" name="" id="cit">
<div id='resdiv'></div>
regarding to your code, you have an error here:
$('#resdiv').load('results.php?cit=x.value');
change this to:
$('#resdiv').load('results.php?cit=' + x.value);

Executing code from a text area

I have a page that accepts Javascript code in a text area. I would like to run that code when the user presses the run button.
Is the following possible:
var programFunction = new Function(document.getElementById('program').value);
<button type="button" onclick="programFunction">run</button>
Let's say the textarea program has the following in it:
document.getElementById('program').value = 'Tested';
When I try to test this myself, I don't get any errors but I also don't get any output.
You need your "run" button to process and run the code.
At its simplest, it's just:
onclick="eval(document.getElementById('program').value);"
Note that in this case, eval is perfectly okay provided that the value of the program field can only come from the user's own input, and not anyone else's.
There are a couple of things wrong in your code:
It seems like you try to access the content of the textarea before it got a value.
You don't run the function you created.
You have to retrieve the value of the texarea when the button is pressed, not before. Still using Function, it would look like:
<script>
function runCode() {
var source = document.getElementById('program').value;
var func = new Function(source);
func();
}
</script>
<button type="button" onclick="runCode()">run</button>

Javascript accessing a variable in my html textbox

so I have a js file, lets call it foo.js and it has a variable count; this count is what I want to display in a textbox on the html end, which is a separate file.
How can I make the textbox, reference the variable which constantly is updated per minute?
Here is what I tried so far,
<script type="text/javascript">
var elem = document.getElementById("count");
elem.value = countVal;
</script>
Where I want to show it in HTML:
Shapes:
if I set elem.value to 5, or hello world, it works, but I want to set it to the constantly updating js value in a seperate page. I also tried creating a function in my js file, where I return the variable, and then calling that function in the html tag, but that did not work either.
I am new to JS, and I would appreciate your help.
Thank you.
Edit:
THIS IS NOT for a TIME INTERVAL, I have a variable, that based on some drawings, counts the shapes drawn, and I want to bring that to front end. That count.
MORE CODE:
my function in the .js file
function getShapeNumbers(){
return shapeCount;
}
<script type="text/javascript">
var elem = document.getElementById("shapeCount");
elem.value = getShapeNumbers();
</script>
where I want it displayed
Shapes:<input type="text" size="25" style="width:50px;" id ="shapeCount" />
it returns undefined in the textbox even if I change my function to return 50, it shows undefined. And if I just elem.value to 50, then that works. I want it set to my global variable
Probably your js file is not loaded by the browser yet when you run the code elem.value = newvalue.
Run this only after all document html content be loaded:
window.onload = function(){
document.getElementById('shapeCount').value = shapeCount;
};
Also, consider updating directly input when updating variable.
jsFiddle: http://jsfiddle.net/bx4SU/

Javascript document.getElementById("id").value returning null instead of empty string when the element is an empty text box

I have a text box element whose value I am trying to access using document.getElementById("id-name").value. I find that the call is returning a null instead of empty string. The data-type of the returned value is still string. Is null a string value?
<input type="text" value="" id="mytext"> is the textbox whose value I am trying to fetch using var mytextvalue = document.getElementById("mytext").value;
Posting your HTML might help a bit. Instead, you can get the element first and then check if it is null or not and then ask for its value rather than just asking for the value directly without knowing if the element is visible on the HTML or not.
element1 = document.getElementById(id);
if(element1 != null)
{
//code to set the value variable.
}
fyi, this can happen if you are using the html type="number" attribute on your input tag. Entering a non-number will clear it before your script knows what's going on.
For your code
var mytextvalue = document.getElementById("mytext");
mytextvalue will contain null if you have a document.write() statement before this code. So remove the document.write statement and you should get a proper text object in the variable mytextvalue.
This is caused by document.write changing the document.
It seems that you've omitted the value attribute in HTML markup.
Add it there as <input value="" ... >.
Please check this fiddle and let me know if you get an alert of null value. I have copied your code there and added a couple of alerts. Just like others, I also dont see a null being returned, I get an empty string. Which browser are you using?
This demo is returning correctly for me in Chrome 14, FF3 and FF5 (with Firebug):
var mytextvalue = document.getElementById("mytext").value;
console.log(mytextvalue == ''); // true
console.log(mytextvalue == null); // false
and changing the console.log to alert, I still get the desired output in IE6.
I think the textbox you are trying to access is not yet loaded onto the page at the time your javascript is being executed.
ie., For the Javascript to be able to read the textbox from the DOM of the page, the textbox must be available as an element. If the javascript is getting called before the textbox is written onto the page, the textbox will not be visible and so NULL is returned.
try this...
<script type="text/javascript">
function test(){
var av=document.getElementById("mytext").value;
alert(av);
}
</script>
<input type="text" value="" id="mytext">
<input type="button" onclick="test()" value="go" />
if you are using external js file add <script src="fileName.js"></script> at the end before closing the </html> tag. or place <script> at the end before closing html tag .

Categories