How to make javascript code to be embed into html button? - javascript

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>

Related

Javascript didn't read all var

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Exchange rate</title>
<link rel="stylesheet"type="text/css"href="exstyle.css"/>
</head>
<body>
<script type="text/javascript">
d=35;
e=40;
x=prompt("Insert Value");
var z=x/d,
g=x/e;
var currency;
currency=prompt("Insert Country");
if(currency="dollar"){
document.write(+z);
}
else
if(currency="euro"){
document.write(+g);
}
</script>
</body>
</html>
When I try to run this code, the result always the same.
Example I input 4000 as a value of x and when I insert currency as dollar I got 114.28 which is correct but when I insert currency as euro the result still the same as dollar. did I do something wrong?
You need to do the comparison operator (==)
if(currency=="dollar"){
document.write(+z);
}
else
if(currency=="euro"){
document.write(+g);
}

Access to restricted URI denied. Firebug

I have 1 HTML Page and 1 js file . I cannot run script in Firebug on Chrome
it shows following Error :
Access to restricted URI denied.
Code is as per tutorial
HTML Page
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Example </title>
</head>
<body>
<input type="button" value="Hide" id="toggle_messege" />
<p id="messege">
You see this paragraph
</p>
<script type="text/javascript" src="~/js/toggle.js"></script>
<script type="text/javascript" src="~/js/jquery-1.7.1.min.js"></script>
</body>
</html>
js file
$('#toggle_messege').click(function () {
var value = $('#toggle_messege').attr('value');
$('messege').toggle('fast');
if (value == 'Hide') {
$('#toggle_messege').attr('value', 'Show');
}
else if (value == 'Show') {
$('#toggle_messege').attr('value', 'Hide');
}
});
Similar post :
Error: "Access to restricted URI denied"
http://jquery-howto.blogspot.in/2008/12/access-to-restricted-uri-denied-code.html
They suggest it is same domain policy issue and solution is to access file from webserver(localhost)
my url is
http://localhost/WebApplication2/js/
But couldnot solve the issue ..
plz suggest if something missing
You have errors in your code
1.Change the order of file , jquery reference is first
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/toggle.js"></script>
2.You code must be wrapped in $(document).ready() and it should be in <head> block
$(document).ready(function(){
$('#toggle_messege').click(function () {
var value = $('#toggle_messege').attr('value');
$('#messege').toggle('fast'); // You missed # in this line
if (value == 'Hide') {
$('#toggle_messege').attr('value', 'Show');
} else if (value == 'Show') {
$('#toggle_messege').attr('value', 'Hide');
}
});
});
DEMO

Calling same js function on pageload and on button click and displaying both functions called

I have a javascript function and I want to call the same function twice.
Once on page load and once on a button click.
I want the output as the function on page load will keep on running in backend and
display output and when button is clicked again function is called and its output
gets displayed.
Finally both functions output should be displayed.
This is what I have written but am not getting the output.
For e.g.
Javascript file: n.js
function webservice{
for(i=0;i<10;i++)
{
alert("some msg");
`enter code here`
}
html file n.html
<html>
<head>
<script type = "text/javascript" src="n.js"></script>
<script type="text/javascript">
window.onload=function() {
webservice();
}
</script>
</head>
<body>
<input id="button" type = "button" name = "webservice" value = "Call Webservice"
onClick="webservice()" />
</body>
</html>
Following code is working on my machine. I think you are missing () for function webservice(). so instead of webservice use webservice()
<html>
<head>
<script>
function webservice()
{
for(i=0;i<10;i++)
{
alert("some msg");
}
}
window.onload=function()
{
webservice();
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<input id="webservice" type = "button" name = "webservice" value = "Call Webservice" onClick="webservice()" />
</body>
</html>
Update:
if you write your onload function like this then you will be able to execute call 1 and call 2, butcall 2 will begin when call 1 loop is completed.
window.onload=function()
{
webservice('onload'); //call 1
document.getElementById("webservice").click(); //call 2
}
I think you code may be in wrong format.
function webservice{
for(i=0;i<10;i++)
{
alert("some msg");
`enter code here`
}
change to
function webservice(){
for(i=0;i<10;i++)
{
alert("some msg");
//enter code here
}
just add () after webservice. like webservice().

What's wrong with this short Javascript code?

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>

what if jquery.js is include into the page twice?

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.

Categories

Resources