html + Js code not working [closed] - javascript

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

Related

Why I can't get this element identified by an id attribute? [closed]

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">

Javascript - Average calculation [closed]

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);

please tell me what is wrong with this simple code [closed]

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 am new to html. I am trying to get time but the code is not working in browser. please help
<h1>My First JavaScript</h1>
<button type="button"
onclick="document.getElementByid('time').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="time"></p>
</body>
</html>
Typo in your code,
document.getElementByid('time')
should be:
document.getElementById('time')
(you miss the i capital)
For simple debugging like this, you can use the console of your web browser. Just hit F12, and look into the console, the error will be described here.
There is a typo here:
document.getElementByid
should be
document.getElementById
Working example here.
Please fix that line :
document.getElementByid('time')
and change it to
document.getElementById('time')
<button type="button"
onclick="document.getElementById('time').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="time"></p>
You spelt getElementById wrong
Please Change Next line:
document.getElementByid('time')
to:
document.getElementById('time')

How to insert <li> element on <ul> using pure javascript [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
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.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Improve this question
I am having an issue with javascript and i don't know how to solve it ...
Actually my code is working good with jsfiddle, but when i try to insert on my HTML page ,it simply doesnt work anymore ...
What i want to, is to add the < li> on < ul> each time i tried to hit the button named "Add" !
HTML code:
....
<td width="50%" valign="top">
<b> SUPER: </b>
<ul id="ul">
</ul>
</td>
....
<input type="submit" value="Add" onclick="add()"/>
....
JavaScript code:
<script type="text/javascript">
function add(){
var ul = document.getElementById("ul");
var li = document.createElement("li");
li.innerHTML = "LoL";
ul.appendChild(li);
}
</script>
The result with that code : it doesn't add anything on my HTML page when i try to hit the button...
Thankfully,
May be oversimplifying this, but here's a thought: Your input button is a SUBMIT, so when the onClick performs, the submit happens immediately thereafter, restoring the page to its original state. The process happens so quickly the appearance is that the code did nothing.
Just change the input type to "button", eg
<input type="button">

Load php function onClick [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
Javascript
$("#ReadTok").click(function(){
$("#tokentype").load('../process/read_token_type.php');
});
HTML
<input type="button" id="Readtok" value="Read Token" />
<span id="tokentype"></span>
PHP
echo $PartType;
This has worked perfectly for me before why is it not working now.
What am I doing wrong?
Replace your javascript with this one
$("#Readtok").click(function(){ //here t is small letter in ReadTok
$("#tokentype").load('../process/read_token_type.php');
});
Because your button id is id="Readtok"
A typo error. ReadTok vs Readtok
$("#ReadTok").click(function(){
$("#tokentype").load('../process/read_token_type.php');
});
Your ID and Function Selector Name is mismatch thats the problem correct it sure it will work
$("#Readtok").click(function(){
$("#tokentype").load('../process/read_token_type.php');
})
Here one solution.
<Html>
<script type="text/javascript">
$(document).ready(function () {
$("#Readtok").click(function () {
$("#tokentype").load('../process/read_token_type.php');
});
});
</script>
<head>
</head>
<body>
<input type="button" id="Readtok" value="Read Token" />
<span id="tokentype"></span>
</body>
</html>
I hope to help
the id attribute is case sensitive so Readtok and ReadTok are different
either change your javascript to this :
$("#Readtok").click(function(){
$("#tokentype").load('../process/read_token_type.php');
});
or else chage id :
id="Readtok" to id="ReadTok" without altering your javascript

Categories

Resources