I´m having a normal JavaScript-function and want to use the Variable (myVar) also in my jQuery Code - is this possible? and how?:
<a onclick="showtitle(abctitle);" href="#">Testlink</a>
<script>
function showtitle(myVar) {
myTitle = myVar;
}
$(document).ready(function() {
alert(myTitle); //I would like to alert "abctitle"
};
</script>
Firstly, don't mix DOM0 inline event handlers with jQuery. Separate your markup and your logic.
If you use a data- attribute you can put your variable's content in your HTML, and then extract that in the event handler:
<a id="test" data-foo="mytitle" href="#">Testlink</a>
and then:
$(document).ready(function() {
$('#test').on('click', function() {
alert($(this).data('foo'));
}
});
In this code the alert won't appear until the link is actually clicked on, of course.
I believe #Alnitak has a great answer. But if you are just looking to solve the question you asked, wrap abctitle in single quotes and make myTitle a global variable:
<a onclick="showtitle('abctitle 2');" href="#">Testlink</a>
<script>
myTitle = "abctitle";
function showtitle(myVar) {
myTitle = myVar;
}
$(document).ready(function() {
alert(myTitle); //I would like to alert "abctitle"
});
</script>
Also, your document ready function was missing its closing parenthesis )
Working example here: http://jsfiddle.net/CbhxY/
UPDATE
Working example on jsfiddle did not work so well. Try this: http://jsbin.com/ohedab/1/
The JS Bin example also adds the alert call in the showtitle function.
you can do with this
function showtitle(abctitle){
alert(myTitle); //I would like to alert "abctitle"
}
Related
HTML:
<img src="https://help.pace.edu/helpdesk/info_icon_small.gif?v=12_1_0_300.gif" onclick="plusButton_Click()">
js:
function plusButton_Click() {
alert('hi');
}
http://jsfiddle.net/uEypH/1/
I might be new to Javascript and all. But why does my Firefox console say
"ReferenceError: plusButton_Click is not defined"?
Because the function must be in global scope if you intend to call it in inline js.
jsfiddle creates a new closure, so it is not global. Use their --wrap it in head-- option.
Updated demo
Or change
function plusButton_Click() {
alert('hi');
}
to:
window.plusButton_Click = function(){
alert('hi');
}
You have javascript set to onLoad. In a normal page, you would have put it straight in the body most likely. Set it to NoWrap and it should work fine.
By default, jsFiddle places your Javascript code into an onLoad function. Your plusButton_Click will not be visible outside of this closure.
To fix, either:
Select "In <head>" from the dropdown (Example)
Define your function as window.plusButton_Click = function() { ... } (Example)
This is pretty basic, still doesn't work... I'm trying to change the class of my button, which has the id "nav_list". I wrote the script:
var specialSection = document.getElementById("nav_list");
specialSection.onclick = function() {
alert("what");
$('#nav_list').toggleClass('active');
};
I get the "what" alert, but the class isn't toggled. What am I missing? Thanks in advance!
toggleClass is a jQuery method, for use it you must include jQuery in your page.
Like:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
At the moment if you check the console you must see an error like (demo: http://jsfiddle.net/IrvinDominin/GyaBY/):
ReferenceError: Can't find variable: $
Avoid mixing jQuery and javascript event binding so your code will look like:
$('#nav_list').click(function() {
alert("what");
$(this).toggleClass('active');
});
Demo: http://jsfiddle.net/IrvinDominin/GyaBY/2/
This is the code:
JS:
function f1(){
document.getElementById('test').href="link2";
};
HTML:
<a href='link1' id='test' onclick='f1();'> Text </a>
The debugger says f1() is not defined. What could it be? The "a" tag is inside a "span" tag, maybe that?
Edit: Sorry for the JQuery thingy I added it to see what happened :P
I forgot to put the linking of the JS file, my bad:
<script type='script' href='javascript.js'> </script>
Where did you put f1? onclick find the function in the global scope, if you didn't define the function in global, then it will not be found.
And $(document).getElementById('test').href="link2"; is wrong too,
it should just be document.getElementById('test').href="link2";
Also, if you are using jQuery, then the best way not use the inline onclick:
$(function(){
$('#test').click(function() {
$(this).attr('href', 'link2');
});
});
A simple JavaScript onclick event is not working but I don't understand why, here is the code:
<button onclick="removeLol()">remove style</button>
function removeLol() {
alert("hello");
}
and here is a simple example: http://jsfiddle.net/YNQg6/1/
That's only because of the way how jsfiddle inserts the javascript.
Jsfiddle wraps your code into a function which limits the scope and protects the global namespace:
window.onload=function(){
function removeLol() {
alert("hello");
element.className = element.className.replace(" lol ", "");
}
}
If you tell jsfiddle to inject the code into the document body it works:
http://jsfiddle.net/YNQg6/13/
Or you could turn your "local" function in a global one:
window.removeLol = removeLol;
The code works just fine (just tried it on my server). Check your console for other errors that may be causing the script to not run
I need to basically add this to my page:
<body onload="document.getElementById('WeddingBandBuilder').focus()">
However due to my template I cannot change the tag. So is there a way to do the equivalent with a script in the < head > tag or something?
Thanks!
<script>
window.onload = function() {document.getElementById('WeddingBandBuilder').focus()};
</script>
You should always be careful there isn't already a window.onload defined. I've been burned a number of times by assuming I would be the only one attaching things to <body onload="..."> or window.onload.
See this answer and comments for a solution to this issue.
Use a JS library like jQuery or Prototype and create an external script file with something like this:
for jQuery:
$(function() { $('#WeddingBandBuilder').focus(); });
for Prototype:
Event.observe(window, 'load', function() { $('WeddingBandBuilder').focus(); });
I might check if that page has already included jQuery? If so, you can do something like this:
$(document).ready(function() {
$('#WeddingBandBuilder').focus();
});