Two onClick actions one button - javascript

Does someone know a wizards trick to make it work ?
<input type="button" value="Dont show this again! " onClick="fbLikeDump();" onclick="WriteCookie();" />
PS: I am using it in a .js file.

Additional attributes (in this case, the second onClick) will be ignored. So, instead of onclick calling both fbLikeDump(); and WriteCookie();, it will only call fbLikeDump();. To fix, simply define a single onclick attribute and call both functions within it:
<input type="button" value="Don't show this again! " onclick="fbLikeDump();WriteCookie();" />

Try it:
<input type="button" value="Dont show this again! " onClick="fbLikeDump();WriteCookie();" />
Or also
<script>
function clickEvent(){
fbLikeDump();
WriteCookie();
}
</script>
<input type="button" value="Dont show this again! " onClick="clickEvent();" />

<input type="button" value="..." onClick="fbLikeDump(); WriteCookie();" />

Give your button an id something like this:
<input id="mybutton" type="button" value="Dont show this again! " />
Then use jquery (to make this unobtrusive) and attach click action like so:
$(document).ready(function (){
$('#mybutton').click(function (){
fbLikeDump();
WriteCookie();
});
});
(this part should be in your .js file too)
I should have mentioned that you will need the jquery libraries on your page, so right before your closing body tag add these:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://PATHTOYOURJSFILE"></script>
The reason to add just before body closing tag is for performance of perceived page loading times

Related

Pass html input into a js function?

I would prefer to accomplish this without inline script. I'd be interested to learn this both with and without jQuery.
After trying several different element selector methods, changing the placement of my script tag, and trying onclick, this is how my code looks.
The console is returning the error "Cannot read property 'addEventListener' of null".
javascript:
document.getElementById("button").addEventListener("click", someFunction(document.getElementById("number").value));
someFunction(){};
Html:
<head>
<script src="nibble.js"></script>
</head>
<body>
<form>
<input type="number" id="number" name="number" ></input>
<input type="button" id="button" name="button" value="Test number"></input>
</form>
</body>
</html>
Your script needs to be placed below the html (or be wrapped in window.onload) in order to find the elements at runtime. Also, your addEventListener is wrong, right now it isn't a function that gets called, but undefined. Try it like this:
document.getElementById("button").addEventListener("click", someFunction);
function someFunction(){
alert(document.getElementById("number").value)
};
HTML:
<head>
</head>
<body>
<form>
<input type="number" id="number" name="number" ></input>
<input type="button" id="button" name="button" value="Test number"></input>
</form>
<script src="nibble.js"></script>
</body>
</html>
Created one fiddle for you. Hope this will be of some help.
http://jsfiddle.net/mfLt7/96/
$(document).ready(function(){
document.getElementById('button').addEventListener('click', someFunction);
function someFunction(){
var value = document.getElementById('number').value;
alert(value);
}
});
Hope this be of some help. Happy Learning
Have a look at this fiddle I just made. The way you are passing someFunction to your addEventListener call is wrong because you are calling the function instead of passing it's reference to the event listener so it can decide to call it on its own.
Here's what the function looks like:
document.getElementById("button").addEventListener("click", someFunction);
function someFunction(){
document.querySelector('.output').innerHTML = document.getElementById("number").value
};

jquery is not working onclick

on click id="check_user" alert is not working .and this is my code.
<html>
<script>
$("#check_user").click(function(){
alert("good");
});
</script>
<body>
<label name="email">Email</label>
<input type="email" id="log_user_email" placeholder="example#example.com" />
<label name="password">Password</label>
<input type="password" id="log_password" placeholder="*********"/>
<input type="button" value="Login" id="check_user" style="cursor:pointer;" />
</body>
</html>
Assuming you have added the jquery library, You need to attach the event when DOM is loaded.i.e. on DOM ready event:
$(function(){//document ready function
$("#check_user").click(function(){
alert("good");
});
});
The jQuery script you've written is inside 'script' tag. Nice !
But the whole script should either be inside 'head' tag or inside 'body' tag. ;) 3:)
use on method for adding event for dynamically element added
and wrap the jquery code inside the $(document).ready() method
$(document).ready(function() {
$("#check_user").on('click', function(evt) {
alert("good");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label name="email">Email</label>
<input type="email" id="log_user_email" placeholder="example#example.com" />
<label name="password">Password</label>
<input type="password" id="log_password" placeholder="*********" />
<button type="button" id="check_user">login</button>
Seeing as how you haven't shown your entire code, and your code appears valid, I can only assume that you have not added the jQuery library before adding that script tag. And you should also wrap your code within the jQuery ready function $(document).ready(); especially seeing that your code appears before the body tag which means the DOM content would not have completely downloaded at the time the script is executed.
In summary, make sure you added included the jQuery library before your script.
Also wrap your code with $(document).ready(); like this:
$(document).ready(function(){
$("#check_user").click(function() {
alert("good");
});
});

JQuery not working on submit button

I am trying to learn some JQuery. I am using an external js to write my code in. It works fine when I call the 2 paragraph functions, but when I call the submit button it just load the page again.
My code looks like this:
<html>
<body>
<p id="paragraf">This is an internal paragraf</p>
Another Example:
<p id="paragraftest">This is the external js script</p>
<form>
<input type="text" name="Submit_test">
<button id="buttontest">Submit</button>
</form>
<script type="text/javascript" src="jqueryScript/jquery.js"></script>
<script type="text/javascript" src="jqueryScript/hide.js"></script>
</body>
</html>
Javascript:
$('#paragraf').click(function() {
$('#paragraf').hide();
});
$('#paragraftest').click(function() {
$('#paragraftest').hide();
});
$('buttontest').submit(function() {
alert("test");
});
/* I have tried with "" and '' in buttontest and test, but still the same */
I have also tried with this, but it is still the same.
<form>
<input type="text" name="buttontest">
<input type="submit" value="">
</form>
Can anybody see why nothing happens?
Best Regards
Mads
Missing id selector - buttontest is the id of the button so you need to use id-selector to select it(prefix with #)
$('#buttontest').submit(function() {
alert("test");
});
Correct this syntax:
$('input[name=buttontest]').submit(function() {
alert("test");
});
Using a unique ID for the button:
$('input#button_id').submit(function() {
alert("test");
});
You should select the button with the following way:
$('#buttontest')
You hadn't used the #, which is required when we are selecting elements form the DOM using their ids. For sure it was a writing error, since you use this correctly on your other selections.
Submit event is a form event, and you are trying to bind it to a button.
$('form').submit(function() {
alert("test");
});
In generally if you want to submit a form you should use dedicated onsubmit form event, not click event on any button.
It works with this code now:
<form id="form">
<input type="text" name="buttontest">
<input type="submit" value="submit">
</form>
<form id="form_1">
<input type="text" name="buttontest">
<input type="submit" value="submit">
</form>
Javascript:
$('#form').submit(function() {
alert("test");
});
$('#form_1').submit(function() {
alert("test");
});

Javascript: Load an Image from url and display

I want to preface this with the fact that I am very very new to JavaScript. I appreciate your patience with me.
I'm trying to create a script that allows a user to input a name into a text-area, press submit and an image is displayed based on that name.
I managed to come up with this:
<html>
<body>
<form>
<input type="text" value="" id="imagename">
<input type="button" onclick="window.location.href='http://webpage.com/images/'+document.getElementById('imagename').value +'.png'" value="GO">
</form>
</body>
</html>
Which almost does exactly what I need -loads an image around what a user inputs. But what I want is not for the image to open in a new window, or download to my computer - I want it to display on the page when clicked as an image like the example here.
I'm sure that my inexperience with Javascript is the main cause of my being unable to figure this out. The script above is as far as I can get without screwing things up. Any help is appreciated.
When the button is clicked, get the value of the input and use it to create an image element which is appended to the body (or anywhere else) :
<html>
<body>
<form>
<input type="text" id="imagename" value="" />
<input type="button" id="btn" value="GO" />
</form>
<script type="text/javascript">
document.getElementById('btn').onclick = function() {
var val = document.getElementById('imagename').value,
src = 'http://webpage.com/images/' + val +'.png',
img = document.createElement('img');
img.src = src;
document.body.appendChild(img);
}
</script>
</body>
</html>
FIDDLE
the same in jQuery:
$('#btn').on('click', function() {
var img = $('<img />', {src : 'http://webpage.com/images/' + $('#imagename').val() +'.png'});
img.appendTo('body');
});
Are you after something like this:
<html>
<head>
<title>Z Test</title>
</head>
<body>
<div id="img_home"></div>
<button onclick="addimage()" type="button">Add an image</button>
<script>
function addimage() {
var img = new Image();
img.src = "https://www.google.com/images/srpr/logo4w.png"
img_home.appendChild(img);
}
</script>
</body>
Add a div with ID imgDiv and make your script
document.getElementById('imgDiv').innerHTML='<img src=\'http://webpage.com/images/'+document.getElementById('imagename').value +'.png\'>'
I tried to stay as close to your original as tp not overwhelm you with jQuery and such
You have to right idea generating the url based off of the input value. The only issue is you are using window.location.href. Setting window.location.href changes the url of the current window. What you probably want to do is change the src attribute of an image.
<html>
<body>
<form>
<input type="text" value="" id="imagename">
<input type="button" onclick="var image = document.getElementById('the-image'); image.src='http://webpage.com/images/'+document.getElementById('imagename').value +'.png'" value="GO">
</form>
<img id="the-image">
</body>
</html>
You were just missing an image tag to change the "src" attribute of:
<html>
<body>
<form>
<input type="text" value="" id="imagename">
<input type="button" onclick="document.getElementById('img1').src = 'http://webpage.com/images/' + document.getElementById('imagename').value +'.png'" value="GO">
<br/>
<img id="img1" src="defaultimage.png" />
</form>
</body>
</html>
First, I strongly suggest to use a Library or Framework to do your Javascript. But just for something very very simple, or for the fun to learn, it is ok. (you can use jquery, underscore, knockoutjs, angular)
Second, it is not advised to bind directly to onclick, my first suggestion goes in that way too.
That's said
What you need is to modify the src of a img in your page.
In the place where you want your image displayed, you should insert a img tag like this:
Next, you need to modify the onclick to update the src attribute. The easiest way I can think of is like his
onclick=""document.getElementById('image-placeholder').src = 'http://webpage.com/images/' + document.getElementById('imagename').value + '.png"
Then again, it is not the best way to do it, but it is a start. I recommend you to try jQuery and see how can you accomplish the same whitout using onclick (tip... check the section on jquery about events)
I did a simple fiddle as a example of your poblem using some google logos... type 4 o 3 in the box and you'll two images of different size. (sorry.. I have no time to search for better images as example)
http://jsfiddle.net/HsnSa/

onClick not working javascript

i had an onclick event for a button and it worked fine. now it doesnt and im trying to see why not. it worked for a little bit and i think i changed something, but the code seems correct. i think there may be some outside factors influencing the code possibly.
here's my code:
<script language="javascript">
function search(){
document.write("hi");
}
</form>
<input type="button" value='s' name='submit' id='submit' onClick='search();'>
</form>
<div id='searchdrop'>
stuff inside dropdown
</div>
Firstly, your markup is messed up. Correct it and then check if you still have problems. Shown below will just correct the markup you have shown, please make sure your entire markup is valid.
<script language="javascript">
function search(){
document.write("hi");
}
</script> <!-- this was missing -->
<form> <!-- this was ending the form tag instead of starting -->
<input type="button" value='s' name='submit' id='submit' onClick='search();'>
</form>
<div id='searchdrop'>
stuff inside dropdown
</div>
this works
<html>
<body>
<input type="button" value='s' name='submit' id='submit' onClick='search();'>
<script type='text/javascript'>
function search(){
document.write("hi");
}
</script>
</body>
</html>
Your form begins with a </form> rather than <form>. Could that be the problem?
You enigmatically decline to describe exactly what the "not working" part is, but I'll tell you right now that using document.write() inside an event handler like that is almost certainly not going to end up in a satisfactory user experience.
You haven't closed your <script> tag.
Your form starts with </form>

Categories