I have an image:
<img id="reqPic" src="mark.png" />
I also have declared a flag earlier on in the page:
<script type="text/javascript">
var isToolTipEnabled = true;
</script>
I now want to be able to check the flag and if its true, assign the onmouseover and onmouseout events. However, the onmousover event has to be changed to another function called Tip('string') which takes in a string. I have seen other questions on here on how to change this but it I dont see how I can pass paramters to the new function I want to change to.
The onClick would be changed to something like this:
onClick="javascript:toggleHelp('reftypeHelp');";
Any help on this would be greatly appreciated.
Thanks!
document.getElementById("reqPic").onmouseover = function() { Tip('This is the string.'); };
You could have an onload event on your body tag which calls a function that checks necessary values.
<script type="text/javascript">
var isToolTipEnabled = true;
function eventAdder() {
if (isToolTipEnabled) {
var img = document.getElementById('reqPic');
img.onmouseover = function() {
Tip('string');
}
img.onmouseout = whateverElse;
}
}
</script>
<body onload="eventAdder();">
with jQuery you could use the hover function but yeah creating an inline function works too
Related
I am still new to JavaScript and jQuery, so I am confused as to why the following code is not working as I anticipated. All I am trying to do is save input on a button click (id=recordInput) and display it with another button click (id=displayInput). What I observe is that tempInput is stored, (the code works until that point) but assignment of displayInputs onclick attribute is not executed. My question is, can you not nest a $().click() call inside of another &().click() call?
<script>
$(document).ready(function () {
$('#recordInput').click(function(event) {
var tempInput = $('#testInput').val();
&('#displayInput').click(function(event) {
console.log(tempInput);
});
});
});
</script>
My thinking is this in pseudocode:
assign recordInput onclick attribute to the following function:
store tempInput
set displayInput onclick to alert the tempInput value
what is wrong with my thinking?
NOTE: I did not include any html tags but all of the ids are referenced correctly
It's not working because you have put & instead of $ here
$('#displayInput').click(function(event) {
Fixing this may work, but you shouldn't set event handlers this way. Because every time your first handler function is called it will set an event handler for the second one. You can try with your console.log and you will see that the number of console.log is increasing by every click on #recordInput. So you should better set it like this :
var tempInput;
$('#recordInput').click(function(event) {
tempInput = $('#testInput').val();
});
$('#displayInput').click(function(event) {
console.log(tempInput);
});
I would change
$(document).ready(function () {
$('#recordInput').click(function(event) {
var tempInput = $('#testInput').val();
&('#displayInput').click(function(event) {
console.log(tempInput);
});
});
});
to
$(function(){
var testInput = '';
$('#recordInput').click(function(){
testInput = $('#testInput').val();
});
$('#displayInput').click(function(){
if(testInput !== ''){
console.log(testInput);
}
});
});
You are using & instead of $. Of course, you don't have to format the code exactly like I did.
I'm trying to disable an html link after one click.
I found some solutions but it seems that they doesn't work on my code.
Here is what I tried to do:
<html>
<script type="text/javascript">
function image(url)
{
var img = document.createElement("IMG");
var url = "http://www.luigimelisi.com/wp-content/uploads/2014/03/url_routing.jpg";
img.src = url;
document.getElementById('image').appendChild(img);
}
function clickAndDisable(link)
{
link.onclick = function(event)
{
e.preventDefault();
}
}
</script>
<body>
<div id="image"></div>
<div>Click Here</div>
</body>
</html>
How can I fix it?
In your clickAndDisable function and the onclick handler, the event (in this case 'e') is not being passed as a parameter. You pass in 'event' but reference 'e'. You can make this work by changing 'e' to 'event'. This is what your code might look like for that to work:
link.onclick = function(event) {
event.preventDefault();
};
Actually, your code will work in the way you are hoping. You just made a typo. The mistake you made is in the function 'clickAndDisable' you handle an event by passing in a parameter 'event', but then you try to utilize the event by calling e.preventDefault.
to fix, change e.preventDefault() to event.preventDefault()
Here is the working code or test on JSFiddle here: https://jsfiddle.net/y6ktL4af/
<html>
<script type="text/javascript">
function image(url)
{
var img = document.createElement("IMG");
var url = "http://www.luigimelisi.com/wp-content/uploads/2014/03/url_routing.jpg";
img.src = url;
document.getElementById('image').appendChild(img);
}
function clickAndDisable(link)
{
link.onclick = function(event)
{
event.preventDefault();
}
}
</script>
<body>
<div id="image"></div>
<div>Click Here</div>
</body>
</html>
I think you can fix this by removing the href property of the a tag, and then modifying the clickAndDisable() function to do something like:
link.onclick = null;
image();
There are several ways to solve this with disabling or hiding the link but a reusable one would be to attach an event handler to all links that should be clicked only once:
var oneClickEls = document.querySelectorAll('[data-allow-one-click="true"]');
var _i, _len, _el;
for ( _i = 0, _len = oneClickEls.length; _i < _len; _i++ ) {
_el = oneClickEls[_i];
_el.hasBeenClicked = false;
_el.addEventListener('click', function(event) {
if (this.hasBeenClicked) {
event.preventDefault();
return;
}
this.hasBeenClicked = true;
});
}
This will allow us to specify which links should only be clicked one in the html by adding an attribute named data-allow-one-click:
Click Here
Here is a js fiddle showing your code working: https://fiddle.jshell.net/1akdp6sp/
A possible method would be to change the onclick statement in the a element to something like:
onclick="this.href=''"
This changes the href of the hyperlink to nothing, so nothing happens when the link is clicked on. It also obviates the need for the clickAndDisable function. Is that what you mean by disabled?
Okay So I what to have 3 buttons
<div id="button1" onclick="choose1()">Button1</div>
<div id="button2" onclick="choose2()">Button2</div>
<div id="button3" onclick="choose3()">Button3</div>
And a start button
<div id="startButton" onclick="noFunction()">Start</div>
I want to make it so that pressing on of the 3 option buttons it changes what function will be called from the start button and the background image of the start button should change.
Is there a way to do this with just javascript or do I need jquery?
It also doesn't seem possible to use onclick on div tags, jquery to do that aswell?
jsFiddle
You can use onclick on <div> tags. But you shouldn't use onclick on any tags. Don't confuse your HTML layout and display with your JavaScript functionality. Bind your click handlers directly in the JS code (note that this solution is using jQuery):
HTML:
<div id="button1">Button1</div>
<div id="button2">Button2</div>
<div id="button3">Button3</div>
<div id="startButton">Start</div>
JS:
function choose1() {
// ...
}
function choose2() {
// ...
}
function choose3() {
// ...
}
$(function() {
$("#button1").click(choose1);
$("#button2").click(choose2);
$("#button3").click(choose3);
});
You can do it in javascript (anything possible with jQuery is possible with plain javascript, since jQuery is written in javascript).
Changing the click handler for the startButton from javascript is very straightforward:
document.getElementById("startButton").onclick = newFunction;
Changing the background image is also pretty simple:
document.getElementById("startButton").style.backgroundImage = "image.png";
Obviously, you should replace newFunction and "image.png" with the function and image you actually want to use respectively.
You can say
function choose1() {
document.getElementById('startButton').onclick = function() {
alert("Button one was originally press");
}
}
jQuery IS javascript. It is just a library of functions/methods that you can call.
To solve your problem, you should write a function that changes the onclick property of your start button, and add the function you write to the onclick of the other buttons.
Like so:
function chooseOne(){
document.getElementById('startButton').onclick="/\*whatever\*/";
}
A technology like what #nbrooks said in the comments that would do this very well is AngularJS
If you give each selector button a class, you can use javascript to interate them and bind a click event. Then you can store in a data property a key which you can lookup in a json object start stores the related action handler and image. Finally in your click handler you can pull these properties and apply them to the start button by setting the onClick handler and background image of the start button.
<div class="startSelector" data-startdataid="1">Button1</div>
<div class="startSelector" data-startdataid="2">Button2</div>
<div class="startSelector" data-startdataid="3">Button3</div>
<div id="startButton">Start</div>
<script>
var startData = {
"1": {
action: function() {
alert("Button 1 was selected");
},
image: "/images/button1.jpg"
},"2": {
action: function() {
alert("Button 2 was selected");
},
image: "/images/button2.jpg"
},"3": {
action: function() {
alert("Button 3 was selected");
},
image: "/images/button3.jpg"
}
}
var changeStartButton = function(e) {
var startDataIndex = e.target.dataset.startdataid
var data = startData[startDataIndex]
document.getElementById("startButton").onclick = data.action
document.getElementById("startButton").style.backgroundImage = data.image
}
items = document.getElementsByClassName("startSelector")
for (var i = 0; i < items.length; i++) {
items[i].addEventListener("click", changeStartButton);
}
</script>
Example
http://jsfiddle.net/Xk8rv/3/
here is my code..
<script type="text/javascript">
function clicker(){
var thediv=document.getElementById('downloadoverlay');
if(thediv.style.display == "none"){
thediv.style.display = "";
thediv.appendChild()
return false;
}
}
function clicker1(){
var thediv1=document.getElementById('downloadbox');
if(thediv1.style.display == "none"){
thediv1.style.display = "";
thediv1.appendChild()
return false;
}
}
</script>
on clicking the button.. the event should call two functions simultaneously.. help..??
Add the handlers unobtrusively, from within your script. Something like:
function addHandler(etype, el,handlerFunction){
if (el.attachEvent) {
el.attachEvent('on' + etype, handlerFunction);
} else {
el.addEventListener(etype, handlerFunction, false);
}
}
var myButton = document.getElementById('mybutton');
addHandler('click', myButton, clicker);
addHandler('click', myButton, clicker1);
Yes, you can, if you attach event listener: IE, other browsers.
Just keep in mind that they both won't end at the same moment, and one might get 'cut short', if site redirects, before second function is done.
Also, in this case, I would set CSS class on tag which contains both #downloadoverlay and #downloadbox. Instead of messing with style object directly.
Just write one function that calls both. For example, you could write
function onClick() {
clicker();
clicker1();
}
And set onclick="return onClick();" on the element you care about.
Just make another function to call both of them simultaneously
function callClickers(){
clicker();
clicker1();
}
Now add this to your button onclick
You can call the two functions at once for the onClick event
<button type="submit" id="mySubmit" onClick=" clicker(); clicker1()">Search</button>
I want to add a JavaScript functionality to an array of thumbnails such that the image would expand upon clicking instead of opening in the current window. I am thinking of having a function within the onclick attribute, but I don't think this work:
<script type='text/javascript'>
function expand(){
this.height = 200;
this.width = 200;
}
</script>
<a href='/image_1.jpg' onclick='expand()'>
<img src='/image_1.jpg'>
</a>
If JavaScript is not enabled, I would like the link to work. Any idea how to go about doing this? Thanks for your time :)
You have to give this as a variable in the function for example ths
<script type='text/javascript'>
function expand(ths){
$(ths).find('img').height('200');
$(ths).find('img').width('200');
return false;
}
</script>
<a href='/image_1.jpg' onclick='expand(this)'>
<img src='/image_1.jpg'>
</a>
And return false says Prusse.
** UPDATED **
If you want to resize image, you must call the image and no link.
Don't use the onclick handler:
Instead:
var elem = document.getElementById("the-id-of-a");
elem.addEventListener('click', function(e) { /* handle event */ e.preventDefault(); return false; });
See: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener
Just make the onclick handler return false. Using inline handlers like in your example:
<a href='/image_1.jpg' onclick='expand(); return false;'>