Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
Hi I am trying to write a simple calculation that will average the two numbers entered by user input and then click the average button to get the average of the two. MY problem is that it does not produce an answer. Here is the code
<html>
<body>
<input type="text" id="one">
<input type="text" id="two">
<input type ="button" onclick="average()"value="average">
<input type="text" id ="avg">
<script type"text/javascript">>
function average(){
var a=parseInt(document.getElementById("one".value);
var b=parseInt(document.getElementById("two".value);
var afinal=((a+b)/2);
document.getElementById('avg').value=afinal;
}
</script>
</body>
</html>
Typo fix (missing bracket for getElementById):
var a=parseInt(document.getElementById("one").value);
var b=parseInt(document.getElementById("two").value);
and another typo:
<script type"text/javascript">>
should be:
<script type"text/javascript">
so, the final code is:
<html>
<body>
<input type="text" id="one">
<input type="text" id="two">
<input type ="button" onclick="average()"value="average">
<input type="text" id ="avg">
<script type"text/javascript">
function average(){
var a=parseInt(document.getElementById("one").value);
var b=parseInt(document.getElementById("two").value);
var afinal=((a+b)/2);
document.getElementById('avg').value=afinal;
}
</script>
</body>
</html>
Instead of writing the old-school document.getElementById(), consider using an industry-standard, broadly adopted jQuery library, specifically its method called $.
There, you'll be able to use a CSS selector to get to an element that you want. It's extremely powerful, I recommend learning it.
var a = $("#one").val();
It is just a typo fix,
instead of
var a=parseInt(document.getElementById("one".value);
var b=parseInt(document.getElementById("two".value);
the code becomes,
var a=parseInt(document.getElementById("one").value);
var b=parseInt(document.getElementById("two").value);
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I have this element, it is auto generated by mcssl checkout form. It is a custom field. I'm trying to select it using javascript like so:
var form_field_gclid = document.getElementById("#ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox");;
console.log(form_field_gclid);
<input name="ctl00$ctl00$mainContent$scPageContent$customFieldsControl$customFieldsRepeater$ctl00$customFieldTextBox" type="text" maxlength="200" size="50" id="ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox" class="text">
But I'm getting null as a result. I've tried also, document.querySelectorAll(...); but the same result. It's working when I tried it from console but I'm wondering why it won't work if it's on page javascript. Any ideas would be appreciated. Thank you.
I tried getting rid of the # sign but same result.
<script type="text/javascript">
(function() {
var form_field_test = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox");;
console.log(form_field_test);
}());
</script>
This is the full script I'm using.
You do not need the # in your call to document.getElementById. Simply remove it.
var form_field_gclid = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox");
If you were using jQuery, however, you would need it:
var myElement = $('#myElementId');
But since you are using vanilla JS, simply pass in the element's id as a string.
You have to put the script below the html of the input you are trying to hook.
If the form is not rendered the script will return null.
In your webpage you run the script before the input form is rendered.
I think you are looking for the input value. Right?
Also i added a button for you to give you an example about how to add more functionality. For example, how to add a background color to your input
var form_field_gclid = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox").value;
console.log(form_field_gclid);
// add color to your input
function addColor(){
form_field_gclid = document.getElementById("ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox").style.backgroundColor = "green";
}
If you mean to get the value of the input, i think you are looking for this:
<input name="ctl00$ctl00$mainContent$scPageContent$customFieldsControl$customFieldsRepeater$ctl00$customFieldTextBox" type="text" maxlength="200" size="50" id="ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox" class="text" value="1">
<button onclick="addColor();">change color</button>
You could try this old school vanilla ::
var form_field_gclid = ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox;
console.log( form_field_gclid );
<input type="text" maxlength="200" size="50" id="ctl00_ctl00_mainContent_scPageContent_customFieldsControl_customFieldsRepeater_ctl00_customFieldTextBox" class="text">
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
I have coded a function showRadioValue() in JavaScript which displays a value of radio button. It perfectly worked. But after I changed names of variables (from radVal to ans6) and function's name to checkQ6() , it mysteriously stopped working! Why? Here is the code:
<html>
<head>
<title>Radio test</title>
</head>
<body>
<h2 style="text-align: center;">Question 6</h2>
<p style="text-align: center;">We _______ two dogs and a cat.</p>
<form name="option" style="text-align: center;">
<input type="radio" name="option" value="have">have<br>
<input type="radio" name="option" value="is having"> is having<br>
</form>
<p style="text-align: center;" ><button onclick="checkQ6();">Test radio</button></p>
<script>
/*
function showRadioValue() { // previous perfectly working function
var radVal = document.querySelector('input[name = "option"]:checked').value;
alert(radVal);
}
*/
function checkQ6() { // the function where just ans6 variable name and function name is changed and which does not work
var ans6 = document.querySelector('input[name = "option"]:checked').value;
alert(ans6);
</script>
</body>
</html>
Your function bracket is not closed. You can see these errors in your browser console.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm trying to program a calculator, but I can't find the bug in my code. Here's my code:
<html>
<head>
<title>*</title>
</head>
<body>
<form>
<input type="number" placeholder="Enter a number" id="val1"><br>
times<br>
<input type="number" placeholder="Enter a number" id="val2"><br>
<input type="button" value="Calulate" onClick="myFunction()">
<script>
function myFunction(){
var val1 = document.getElementById(val1)value;
var val2 = document.getElementById(val2)value;
var result = val1*val2;
alert("The result " + result);
}
</script>
</form>
</body>
</html>
If you know how, and want to, can you help me to make it a calculator for +,-,:,* etc all in one? Thank you very much!
You are missing a dot(.), and the selector is wrong use "#id" for ids and ".class" for classes.
var val1 = document.getElementById("#val1").value;
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have a input field like this
<input type="number" id="return_pro" name="available" placeholder="10 Available">
Here if user enter a value more than 10 (That is available), it should not accept and should show an error. How can I do that? I need to use this with the input tag itself. Because text fields comes inside an foreach loop. So number of text fields may increase.
HTML:
<input type="number" id="return_pro" name="available" placeholder="10 Available" onblur="check(this)">
Javascript:
<script>
function check(obj){
var val=obj.placeholder.split(" ")[0];
if(obj.value > parseInt(val)){
alert('invalid');
obj.value="";
obj.focus();
}
}
</script>
The placeholder is just what it says it is, a place holder and has no validation associated.
what you are looking for is some kind of validation, either by javascript/jquery or server side with PHP.
I suggest using a tutorial to learn how validation works like this one here as learning will be infinitely more valuable for the future, than simply copy and pasting some code that people provide on stack overflow.
<input type="number" id="return_pro" name="available" placeholder="10 Available">
<input type="button" value="ok" id="submit"/>
$(function(){
var placeholder=$("#return_pro").attr("placeholder");
var available=parseInt(placeholder.replace(" available",""));
$('#submit').click(function(){
var val=$("#return_pro").val();
if(val>available)
alert("Sorry");
});
});
I think This is actually you looking for.
DEMO HERE
with jQuery
$("#return_pro").keypress(function(){
var intValue = parseInt($(this).val());
if(intValue > 10) {
//value more more then 10, do something
}
});
$('#return_pro').keyup(function(){
var max = $(this).attr('placeholder').match(/[0-9]+/);
if(parseInt($(this).val())>parseInt(max)){
alert('Only '+max+' available');
}
});
DEMO: http://jsfiddle.net/uQH64/
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I'm learning to link js with html so I wrote this but it didn't work
I need to know what's the problem with it!!
Code :
<Html>
<head>
<title>test</title>
<Script>
Function test() {
Alert(document.getElementById("input").value);
}
</script>
</head>
<Body>
<form>
<fieldset>
<input Type="text" name="input" id="input" />
<Button onClick="test()"> alert</button>
</fieldset>
</form>
</Body>
</Html>
Check your console. There's no function called Alert(). It's case sensitive. You're looking for alert(); and it should be function with a lowercase "F".
Also, inline JavaScript (such as onclick in your html) is bad practice. Study up on that here: https://www.google.com/search?q=Why+is+inline+js+bad%3F
By the way, html isn't case-sensitive, but it's standard practice to use lowercase. I think it's relevant to mention here since you're having case-sensitive issues with JavaScript.
This is a very low quality question. You haven't told us what you expect this code to do (alert the contents of the text box, I assume). In the future, please do not use "it doesn't work" as a description of a problem. I'll cut you some slack since it looks like you're new, though.
Anyways, if you had opened up the JavaScript console in the browser, you would have seen a syntax error (or "Unexpected Identifier") on Line 5. That's where you declare your test() function. Let's have a look at it:
Function test() {
Alert(document.getElementById("input").value);
}
Notice you're using "Function". JavaScript is case sensitive, which means that function and Function mean two completely different things. You want function, which is the keyword.
Similarly, there is no such function as Alert(). You'll want to use alert() instead.
The fixed code is:
function test() {
alert(document.getElementById("input").value);
}
Good luck in your learning!
There is a syntax error on your code
the script should be
<Script>
function test() {
alert(document.getElementById("input").value);
}
</script>
both Function and Alert should be in small letters