I'm trying to make the short Javascript code throw an alert and show 93 instead of 0-93 but it's not working ?
<html>
<head>
<script type="text/javascript">
function numberFromInput(value) {
return alert(Number(value.match(/[-]?(\d*)$/).pop()));
}
</script>
</head>
<body>
numberFromInput(0-93);
</body>
</html>
You have to call the function (you're just displaying its call code as content). And you have to pass the value as a string (you need quotes around 0-93):
<script type="text/javascript">
function numberFromInput(value) {
return alert(Number(value.match(/[-]?(\d*)$/).pop()));
}
numberFromInput("0-93");
</script>
Related
I am a noob for learning javascripts
Here I have a javascripts code
I made a button named "click"
when you click the button
it will send a value xx=1 to x
if the value is match with the condition
then it will print "Y", otherwise it will be "N"
but it always cannot shows the messagebox.
<html>
<head>
<title>test</title>
<script language="javascript">
function jclass(xx)
{
var x=xx;
if x==1
alert("Y");
else
alert("N");
}
</script>
</head>
<head>
<h1><a href="javascript:jclass(1);">click</h1>
</head>
</html>
I have also tried other ways like this.
but it still cannot work.
<html>
<head>
<title>test</title>
<script language="javascript">
function jclass()
{
var x=1;
if x==1
alert("Y");
else
alert("N");
}
</script>
</head>
<head>
<h1><a href="javascript:jclass();">click</h1>
</head>
</html>
You have syntax error in if condition. The basic if...else syntax requires condition inside parenthesis after if.
function jclass(xx){
var x=xx;
if (x==1)
alert("Y");
else
alert("N");
}
<h1><a href="javascript:jclass(1);">click</h1>
You must use the brackets
if(x == 1)
You are missing the brackets for comparison,its not python:)
You can check these type of errors in console and act upon exact statement
You should also put curly braces even for a single line in a block or condition to avoid any legacy or formatting issues when running code
Happy Programming
<html>
<head><title>test</title>
<script language="javascript">
function jclass(xx)
{
var x=xx;
if (x==1) {
alert("Y");
}
else {
alert("N");
}
}
</script>
</head>
<head>
<h1><a href="javascript:jclass(1);">click</h1>
</head>
</html>
This question already has an answer here:
Javascript getElementById null error
(1 answer)
Closed 5 years ago.
Why is the text in the div not changed? What did I do wrong here?
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<div id="demo">Text to be changed.</div>
</body>
</html>
And the Javascript:
document.getElementById("demo").innerHTML = "Hello World";
Thank you in advance.
You need to put the tag at the bottom. Or after the div. When the script is loaded as you have it now, the DOM is not yet ready. So if you run the script after the DOM has been initialized, you'll be fine. So put
<script src="script.js"></script>
Just before </body>
Your script is runing before your document is finished loading, so you may need to wait for onload. With jQuery you'd do this:
$(function() {
document.getElementById("demo").innerHTML = "Hello World";
});
Or more succinctly:
$(function() {
$("#demo").html("Hello World");
});
You need to wrap your JavaScript with a listener for the DOM being ready:
document.addEventListener('DOMContentLoaded', function () {
document.getElementById("demo").innerHTML = "Hello World";
});
It's firing too early at the moment.
https://developer.mozilla.org/en/docs/Web/Events/DOMContentLoaded
this is working
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
document.getElementById('demo').innerHTML = 'Hello World';
});
</script>
</head>
<body>
<div id="demo">Text to be changed.</div>
</body>
</html>
If I introduce the jquery.js into the page twice(unintentional OR intentional), what will happen?
Is there any mechanism in jquery that can handle this situation?
AFAIK, the later one jquery will overwrite the previous one, and if there is some action binding with the previous one, it will be cleared.
What can I do to avoid the later one overwrite the previous one?
===edited===
I couldn't understand WHY this question got a down vote. Could the people who give the down vote give out the answer?
==edited again==
#user568458
u r right, now it's the test code:
<html>
<head>
</head>
<body>
fast<em id="fast"></em><br>
slow<em id="slow"></em><br>
<em id="locker"></em>
</body>
<script type="text/javascript">
function callback(type){
document.getElementById(type).innerHTML=" loaded!";
console.log($.foo);
console.log($);
console.log($.foo);
$("#locker").html(type);
console.log($("#locker").click);
$("#locker").click(function(){console.log(type);});
$.foo = "fast";
console.log($.foo);
}
function ajax(url, type){
var JSONP = document.createElement('script');
JSONP.type = "text/javascript";
JSONP.src = url+"?callback=callback"+type;
JSONP.async = JSONP.async;
JSONP.onload=function(){
callback(type);
}
document.getElementsByTagName('head')[0].appendChild(JSONP);
}
</script>
<script>
ajax("http://foo.com/jquery.fast.js", "fast");
ajax("http://foo.com/jquery.slow.js", "slow");
</script>
</html>
it produced the result:
undefined test:12
function (a,b){return new e.fn.init(a,b,h)} test:13
undefined test:14
function (a,c){c==null&&(c=a,a=null);return arguments.length>0?this.bind(b,a,c):this.trigger(b)} test:16
fast test:19
undefined test:12
function (a,b){return new e.fn.init(a,b,h)} test:13
undefined test:14
function (a,c){c==null&&(c=a,a=null);return arguments.length>0?this.bind(b,a,c):this.trigger(b)} test:16
fast
the token "$" of the previous one(jquery.fast.js) is overwrite by the later(jquery.slow.js) one.
Is there any method to avoid the overwriting?
I did try this code:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$('#try').click(function() {
alert('ok');
});
});
</script>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<button id="try">Try me</button>
</body>
</html>
Nothing happend. On click I've got an alert. Same result if the second jquery.js loaded in body tag before or after the button.
I'm getting data from XML. I can successfully pick up a price from the XML but there is a unexpected error called undefined that shows up when I use the function given below;
<html>
<head>
<script type="text/javascript">
function myXml(origin, destination) {
var x=xmlDoc.getElementsByTagName("flights");
for(i=0;i<x.length;i++) {
if(x[i].getAttribute('FrTLAs')==origin && x[i].getAttribute('destination')==destination) {
document.write(x[i].getAttribute('price'))
}
}
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(myXml('SYD','Bali'));
</script>
</body>
</html>
myXml('SYD','Bali') call returns undefined, as you do not return anything in function body. So
document.write(myXml('SYD','Bali'));
will print "undefined" . Just replace above code with this:
myXml('SYD','Bali');
Engineer is correct, or better return the value from your myXml function.
so, document.write(undefined) wont occur and you may not get the above error.
I'm having issues getting jQuery to work correctly while testing on Localhost.
The function that's giving me trouble:
function poll() {
$.get(location.href, function(data) {
var x = $('#datadump', data);
alert(x.html());
});
}
Where location.href = http://localhost/polltest.php
The alert merely returns null instead of a random number produced by PHP's rand function. The source of localhost/polltest.php is:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function poll() {
$.get(location.href, function(data) {
var x = $('#datadump', data);
alert(x.html());
});
}
</script>
</head>
<body onload="poll();">
<div id="datadump">
<?php
$val = rand(0, 100);
echo $val;
?>
</div>
</body>
</html>
Any help regarding a way for this to work would be wonderful and appreciated.
There could be multiple ways to achieve the value of the div with id datadump.
One of the ways being
function poll() {
$.get(location.href, function(data) {
x = $(data).filter('#datadump');
console.log(x);
});
}
The reason it is failing for you:
When you have an HTML string which contains <html>, <head>, <body> tags, and you try to do
$(string)
those elements will be ignored. Only those elements which can be put inside a div are valid. Read it in the jQuery documentation.
When passing in complex HTML, some browsers may not generate a DOM
that exactly replicates the HTML source provided. As mentioned, we use
the browser's .innerHTML property to parse the passed HTML and insert
it into the current document. During this process, some browsers
filter out certain elements such as <html>, <title>, or <head>
elements. As a result, the elements inserted may not be representative
of the original string passed.
This issue has been discussed in detail on this link: https://stackoverflow.com/a/5642602/410367
Can you try this way,
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var x = $('#ads');
alert(x.html());
$.get(location.href, function (data) {
var x = $('#ads', data);
alert(data);
alert(x.html());
});
});
</script>
</head>
<body>
<div id="datadump">
<?php
$val = rand(0, 100);
echo $val;
?>
</div>
</body>
Update: I have changed the script little bit similar to your original post. It works fine for me.