This has been asked 100x before but after reading a lot of those posts I'm still not sure what I'm doing wrong. The script is only executed when you press the button (so the textbox should exist in the DOM by the time the code is executed), Visual Studio even lets me autocomplete the getElementByID argument to inputField. Yet somehow it doesn't get the element and 'null' is printed on my screen.
My code is:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!-- input field + button, and an empty value field -->
<input type="text" id="inputField" value="" />
<input type="button" onclick="printType()" />
</body>
<script>
function printType() {
console.log(document.getElementById(inputField).value); //first try to get the value the regular way
console.log(
get_type(
document.getElementById(inputField)
)
); //also try get_type to see if it exists, we're expecting a string
}
//stole this function from a stackoverflow post
function get_type(thing) {
if (thing === null) return "[object Null]"; // special case
return Object.prototype.toString.call(thing);
}
</script>
</html>
You're missing quotes:
document.getElementById(inputField);
Should be:
document.getElementById('inputField');
Based on #Schlaus answer, I created a jsfiddle with correct answer.
function printType() {
console.log(document.getElementById('inputField').value); //first try to get the value the regular way
console.log(
get_type(
document.getElementById('inputField')
)
); //also try get_type to see if it exists, we're expecting a string
}
Related
var data = document.getElementById('myFieldId');
console.log(data.value);
<!DOCTYPE html>
<html>
<head> </head>
<body>
<input type="text" id="myFieldId"/>
<script src="main.js"></script>
</body>
</html>
I expect when I write any text in the input, it would print the corresponding text. But I don't get anything in the console. What should I do?
You need to add an event listener that executes as soon as someone inputs text.
There is no such thing as binding a variable to a text input; this needs to be implemented by yourself.
See this example:
const data = document.getElementById('myFieldId');
data.addEventListener(
'input', // first argument is the name of the event you want to react to
// second argument is the function that should execute when the event occurs
function(inputEvent) {
console.log(data.value);
}
);
<input type="text" id="myFieldId"/>
You code start at load page so is empty, i add an onchange event so when you finish to write console.log will output the value.
var data = document.getElementById('myFieldId');
data.onchange = function()
{
console.log(this.value);
};
<!DOCTYPE html>
<html>
<head> </head>
<body>
<input type="text" id="myFieldId"/>
<script src="main.js"></script>
</body>
</html>
I need your help,
Normally when a user inputs data, how can the code be modified below so as to program it to ignore any whitespacing, i.e. "a blank keyboard space" ?
Here is the HTML markup in question:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
window.onload = function() {
$("#fileno").bind("input", function(e) {
$('#save').prop('disabled', false)
});
}
</script>
</head>
<body>
<input type="button" value="save" id="save" disabled>
</body>
</html>
Use the Trim function
https://www.w3schools.com/jsref/jsref_trim_string.asp
fieldName = element.property.Trim()
You can try adding a pattern attribute with regex to check or you can add a simple check in javascript when clicking the button to submit it.
regex pattern like:
pattern="[A-Za-z0-9]"
javascript jquery check like:
if($('#inputId').text()) this check will not pass if the value is undefined, null or empty string
Now this is just for reference for a future project but I am trying to call a function that reads in a string but displays a float after. So I first check the string then display a random number. The problem I am having, I think, is with the document.getElementById part. Any suggestions??
HTML File:
<html>
<body>
<input type="text" id="letter" value=""/><br/>
<input type="button" value="LETS DO THIS!" onclick="floatNum();"/></br>
<script type="text/javascript" src="letNum.js"></script>
</body>
</html>
External JS File:
function floatNum()
{
var val1 = document.getElementById("letter");
if (isNaN(val1)
{
alert(Math.random())
}
}
the following code is working:-
in your code,you missed closing parenthesis ")" near to "if condition"
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>demo</title>
<script type="text/javascript">
function floatNum()
{
var letter = document.getElementById("letter");
if (isNaN(letter.value))// using input fields value not the whole object
{
alert(Math.random());
}
}
</script>
</head>
<body>
<input type="text" id="letter" value="" /><br />
<input type="button" value="LETS DO THIS!" onclick="floatNum();" />
</body>
</html>
Yes, you want to pass in the element in the function, like so:
<input type="button" value="LETS DO THIS!" onclick="floatNum(document.getElementById('letter'))"/></br>
And in your JS
function floatNum(el)
{
if (isNaN(el)
{
alert(Math.random())
}
}
In case of a reusable function - try not to make it dependent on your DOM. Think about what would happen if you rename your element or want to use this function again. You couldn't before - now you can.
The problem is on this line:
var val1 = document.getElementById("letter");
It should be:
var val1 = document.getElementById("letter").value;
The first sets val1 to the DOM element representing the input tag, the second sets it to the text value of the input tag (its contents).
You need to process the value of input field not the input field itself.
function floatNum()
{
var letter = document.getElementById("letter");
if (isNaN(letter.value) // using input fields value not the whole object
{
alert(Math.random())
}
}
You don't grab the value of the input, but the input itself.
Correct code would be :
var val1 = document.getElementById("letter").value;
I am new with JavaScript, I have a value in an input field, like 0 or 1 and then when this value changes a word is changed to 'Off' or 'On' respectively.
I know this is pretty simple but I'm new with JavaScript as I said.
How does your code look like currently?
What have you tried so far?
EDIT
I'm working in the code right now so nothing great so far:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function change(value) {
if (value == 1)
return "ON";
else
return "OFF";
}
</script>
</head>
<body>
<input type="text" value="1" />
<p>ON OR OFF RIGHT HERE</p>
</body>
</html>
What difficulties are you encountering?
I need this values keep been updating all the time, if the value of the input field change the word must change either.
If you are new to javascript what tutorials/articles/books did you read so far in order to get started?
Not a specific tutorial right now, I'm googling.
EDIT 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function change(){
toggler = document.getElementById('toggler');
onoff = document.getElementById('onoff');
toggler.onChange = function(e){
onoff.innerHTML = (toggler.value==1)? 'on' : 'off';
}
}
</script>
</head>
<body>
<input type="text" id="toggler" value="1" onkeyup="change()" />
<div id="onoff"></div>
</body>
</html>
I'm trying to following the suggestions but still not working, what am I doing wrong here guys ?
You don't posted any code but here it goes some general code:
Your input:
<input type='text' id='myinput' onkeyup='contentChanged(this)' />
Look for other key events: http://unixpapa.com/js/key.html
Then, your function:
function contentChanged(myinput)
{
var myvalue = myinput.value;
if (myvalue == "1")
{
// Do something with value = 1
}
else if (myvalue == "0")
{
// Do something with value = 0
}
// And so on...
}
EDIT:
Now that you've posted your code, you can do like as I said:
<input type="text" value="1" onkeyup="change(this.value)" />
EDIT 2:
You're setting two events to your object and onChange just works to select object. Because of this I suggested you to use onkeyup or another key event. Just remove your onChange event out of your function.
Change to this and try:
function change(){
toggler = document.getElementById('toggler');
onoff = document.getElementById('onoff');
onoff.value = (Number(toggler.value)==1)? 'on' : 'off';
}
Number function is important to cast your input data and be sure that is a number.
Plus add an maxlength attribute on your textfield to limit user input data:
<input type="text" id="toggler" value="1" onkeyup="change()" maxlength="1" />
You need to add an onChange handler to your input field, this can be done in many ways. for example, let's say your input has an id of #toggler, and the element where either on or off needs to be shown has an id of #onoff
toggler = document.getElementById('toggler');
onoff = document.getElementById('onoff');
toggler.onChange = function(e){
onoff.innerHTML = (toggler.value==1)? 'on' : 'off';
}
I understand that each if statement and each if else statement is contained inside curly braces. That's what I've done here so far. I just started this code and I tested it with only 20% done so that I can fix errors before the code get's too long. With everything looking correct I'm getting a syntax error that for the life of me I can't see where it is. Any suggestions? Here is the code. And here is the link: stickFigure
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>The mysterious road</title>
</head>
<script type="text/javascript">
var curScene = 0
function changedScene(decision){
var message = "";
if(curScene==0) {
curScene=1;
message = "Let the games began!";
}
else if(curScene ==1){
if(decision==1){
curScene = 2;
message = "Looks like you're on the right road.";
}
else(curScene = 3);
message = "you're stading on a bridge overlooking a peaceful stream.";
}
document.getElementById("sceneimg"). src = "scene" + curScene + .png; //There's a syntax error here that I don't see!
alert(message);
}
</script>
<body>
<div style="margin-top:100px; text-align:center">
<p><img id="sceneimg" src="../sfa/scene0.png" alt="Stick Figure" /></p>
Enter here for a glorious adventure!
<input type="button" id="decision" value="1" onclick="curScene(1)" />
Enter this gate for the surpirse of your life!
<input type="button" id="decision" value="2" oonclick="curScene(2)" />
</div>
</body>
</html>
Look here
else(curScene = 3);
and you should be able to work it out.
for the first syntax error you are aware of add say double quoats around the ".png"
and you havent got got ant objects that support the method (no functions found) calling curScene(1) and your only function is changedScene() plus a typo with the oonclick.
and what fearofawhackplanet said.
stick with it, dont give up
Also, even though JavaScript allows it, you're missing a semicolon after your first script statement:
var curScene = 0
Be aware of such omissions. Even though it's not a syntax or semantics error here, this could get you into trouble elsewhere, such as (made up):
return // return undefined
val1 + val2;
Because you use semicolons every where else to terminate your statements, it's best to be consistent.