I want to attach `onclick` on DOMs using javascript [duplicate] - javascript

This question already has answers here:
How to add click event to an element?
(4 answers)
Closed 5 years ago.
Whenever I open a page I am working on, the page makes a lots of amount of doms using javascript, and each one looks like this:
<span class="link img">text</span>
Let me say I assign one of them to a variable called a, for temporary.
I have another function that is to put every of them, including the a, an onclick event, which should be written in the HTML code page, so I can store the whole page and load it later.
The moment it attaches is before loading the doms into document body. Creating doms, and then this function attaches onclick on them, and then load them in the document body.
What it is supposed to do is making this a to:
<span class="link img"
onclick="function(){window.open('http://example.com')}">
text
</span>
So clicking a opens a new window. I made a CSS so every 'link' class looks like a link anyway.
I tried contain one of these into the function to achieve the above change:
a.onclick = function(){window.open('http://example.com')};
,
a["onclick"] = function(){window.open('http://example.com')};
,
const openFunc = function(){
window.open('http://example.com')
};
a["onclick"] = openFunc;
I don't know why, they don't attach onclick property on a.

I didn't understand what you are saying but if you want to add a event on variable 'a' which have the object reference of an element:
Use a event listener
a.addEventListener("click",funcNametocall,false);
read about it here
http://www.w3schools.com/js/js_htmldom_eventlistener.asp

Thomas' reply made me look back at the anchor tag once more time, and it awkwardly solved the problem.
Here's what I put in the function that is to make every one of the doms to a link one:
actually changed 'span' tag to 'a' tag.
I could use a['href'] = 'http://example.com'; to add the link to the tags, or doms, and leave it in HTML code.

Hello Put these code in your head section
<script type="text/javascript">
function openWindows(argument) {
window.open('http://example.com')
}
</script>
and replace your span tag with the following code...
<span class="link img" onClick="openWindows();">text</span>
May check this code and it work, I hope this will also help you.

Related

How can get the text of <a> tag without id using only javascript

I am attaching a javascript to the following a tag section
<a class="btn-button button" onclick="myAlert()">
</a>
And this is my javascript function
<script>
function myAlert() {
alert('Test..');
}
</script>
How can I get the current text been assigned when the javascript will fire?
As you can see there is not id been set in the a tag.
EDIT
I know that right now there is not value but I was just copy my actually code. At some point there will be a values since it is used from other components including Angular.
I can't tell which proper Angular way to do this as you haven't shared Angular code, but this is how it can be done in vanilla HTML/JS:
In the onclick, set this as an argument to your function, so that you can receive the HTML element that called it.
Then you can use either textContent or innerText (see list of their differences in this MDN page) to get or change the text value.
function myAlert(element) {
alert('Test..' + element.textContent);
//adding something so that we can see it's dynamic
element.textContent += ' bla';
}
<a class="btn-button button" onclick="myAlert(this)">
click me</a>

Click function not working in this code [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
I have JQuery included and all my other click functions work. I have tried to debug and change it from class to ID and both the class and ID name is unique (no other element uses the class or ID).
<button type="button" style="margin-left: 5px; padding: 7px;" class="btn query-btn"> Search Transactions </button>
Here is my code for the HTML and my JQuery is:
$(".query-btn").click(function () {
alert("gets here");
});
I literally have no idea why this isn't working because it works on everything else. Could anyone possibly point me the right direction? I have tried giving it an ID (unique) and changing the . to a # and that does not work either and yes it is wrapped in a:
$(document).ready(function () {
I receive no errors which is what is sort of confusing me. Anything would be appreciated!
Note: The HTML button is actually added by AJAX (A button is pressed and the response is directly inserted using the innerHTML), not default page load. I'm not sure if this would effect it but just a note incase it does.
If the button is added by Ajax then you need to use on and an enclosing selector, roughly:
$('body').on('click', '.query-btn', function () {
// Whatever
});
(I'm using body as an example selector, ideally you'd scope it to something much smaller.)

Javascript, HTML and onClick - Function is not defined

I'm trying to make an "Insert link" button to a Rich Text Editor in Javascript. Basically, what it'll do is adding the following code to its content:
textGoesHere
The catch is, someJSFunction() must fire when the user clicks on the button inside the editor itself. I wrote a Javascript function which adds that code when the Insert Link button is clicked on, like this:
editor.setContent(previousContent + theHtmlCode);
However, when I click on the link someJSFunction() doesn't fire, and instead I get a "Function is not defined" error. I tried to define someJSFunction() in the global scope, but it still won't see it. The weird thing is, even if I do something ugly like adding
<script type="text/javascript"> *(I define someJSFunction() here)* </script> textGoesHere
to the editor's content it'll still throw the same error. I've seen a few people in SO with the same problem, but they somehow managed to solve it by defining their functions in the global scope.
Notice that I can't edit the HTML code directly, which is why I have to resort to using a piece of Javscript which will insert a piece of HTML which in turn will call another piece of Javascript.
And before you ask, no, I won't use JQuery.
Avoid event declare in HTML
Avoid constant
The code below should works.
HTML
<textarea id="editor"></textarea>
<a id="link" href="#">Link</a>
Javascript
var link = document.getElementById('link');
link.addEventListener('click', editContent);
function editContent() {
var editor = document.getElementById('editor');
editor.value += "text";
}
The jsfiddle for the example above https://jsfiddle.net/ar54w16L/
Enjoy !
Try onclick instead onClick in html.

Using jQuery can't dynamically add more than one element [duplicate]

This question already has answers here:
Why do multiple `.appendTo` calls on a newly created jQuery element only append it once?
(2 answers)
Closed 3 months ago.
I'm making a multi file uploader using ASP.NET, and i know that IE doesn't support multiple attribute inside <input type="file"/>.
So i wrote a jQuery code which checks if the user uses IE or not. If yes then show a button that let's the user add more than one file upload control, so he can upload more than one file too.
The problem is, When user clicks on that link to generate the <input/> control, and then clicks again to add a third one. Nothing happen! .. Only one control is added so it'd be two controls to use. Not more, no matter how much he clicks no more <input/> controls is added.
Here's my code :
$(function () {
if (!('multiple' in document.createElement('input'))) {
var add_btn = $("<a href='#'>Add more photos</a>").insertAfter("#ContentPlaceHolder1_upload_lbl");
var upload_pnl = $('<input type="file" runat="server"/>');
var upload_holder = $("#fileinput_placeholder");
add_btn.on("click", function () {
upload_holder.append(upload_pnl);
alert("click event called(debugging)");
});
}
});
Here's a picture of the node tree of that portion :
On the click event you are appending upload_pnl, and each consecutive click you are appending the same element, hence you only get 2.
To add more you either need to create the element inside the click event callback, or maybe use something like the jquery clone function to create a new one.
var upload_pnl = $('<input type="file" runat="server"/>');
var upload_holder = $("#fileinput_placeholder");
add_btn.on("click", function () {
upload_pnl.clone().appendTo(upload_holder);
alert("click event called(debugging)");
});
Also as fscan pointed out the runat="server" wouldn't make this new element accessible in the code behind as the page is now client side.
First, you have to create a new element every time you insert it with append. Append will move the element from the old parent.
Secondly, runat="server" afaik is a asp.net attribute and does absolutely nothing in html. You would have to do the posting and stuff yourself if you create the elements with javascript.

Page jumps to the top onclick [duplicate]

This question already has answers here:
Prevent href="#" link from changing the URL hash
(11 answers)
Closed 8 years ago.
I have a click in the middle of a website with code like <a href=“#“ onclick=“…
The function works well, but the a href=“#“ let’s the page always jump to the top when I click on the link. Is there any way around it?
Thanks
Just add ; return false; to the end of your onclick, for example:
<a href="#" onclick="alert('hello'); return false;">
Edit: Hemlock's answer is a good alternative, but yet another one is a combination of the two:
<a href="javascript:void(0)" onclick="alert('hello')">
The advantage of this is that you're explicitly saying that the <a> should do nothing with the href, and the onclick event handler is a separate attribute. If you later decide to attach the onclick handler using JavaScript rather than inlining it (recommended), it's simply a matter of removing the onclick attribute.
Alternate method
Put the javascript in the href and make sure the code ends in a call to void
add
return false;
at the end of the onclick statement
that is
Click Here
if you want an element that does some javascript onclick, you should not use the a tag. The a tag is for navigation from one page to another. You should use span and then you don't have to provide a href attribute. The problem lies in the fact that you chose the wrong HTML element for your case.
<span onclick=""></span>

Categories