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.
Related
I am just starting to learn some programming for the first time and had a question I was hoping someone could help with, hopefully nothing too obvious I am missing.
(Revised Explanation Including Code Samples)
I am using a button to change the inner-html of an element, but I am trying to do the same thing in three ways. For the first way, I can do it. For the second two, I am having trouble and was looking for guidance:
First way I am doing is changing the innerhtml of a paragraph element, by clicking a button that has a statement defined directly behind the onclick event attribute for the button. This is working, code I use can be seen below:
<p id="change1">Does the button below change my text when I click it, based on entering a js function directly behind an onclick event entered as a button attribute?</p>
<button type="button" onclick="document.getElementById('change1').innerHTML = 'Yes_1'">See If It Works_1</button>
Second way I am trying to do this is by using a button that calls a function I defined within a script tag in my html file. The function I defined is supposed to perform the task of changing the innerhtml of the paragraph element I defined. This is not working, code sample can be seen below:
<p id="change2">Does the button below change my text when I click it, based on calling A Function Defined in script tag within My HTML File on with an onclick event?</p>
<button type="button" onclick="internalfunction()">See If It Works_2</button>
<script>
function internalfunction() {
document.getElementById("change2").innterHTML = "Yes_2";
}
</script>
Third way I am trying to do this is the same as the second way, only instead of calling a function defined within a script tag in my HTML file, I am calling one I defined in an external js file. This file however sits in the same directory as my HTML file on my computer. This was is also not working right now. Sample of my code, and the way I linked to the js file can be seen below:
Here is the code in my HTML file:
<p id="change3">Does This Button That Calls A Function Defined in My External JS File Work?</p>
<button onclick="externalfunction">See If It Works_3</button>
here is the function I want to call in my external js file:
function externalfunction(){document.getElementById("change3").innerHTML="Yes_3"};
here is the way I linked to my js file, entering this within the head of the html file:
<script src="javascript.js"></script>
Per some help on the help on the comments and some more review this was confirmed a typo issue where () were omitted to call a function and innerHTML had been misspelled.
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>
I have a piece of HTML that contains some JavaScript
<div id=’abc’> Hello World</div><script> myfunction() { alert (“hi”);}</script>
This is loaded/injected into a target div that is in an iFrame, via an Ajax call that gets the above html.
<iframe id=’myiFrame’><div id=’targetDiv’></div></iframe>
So I’d have something like
<iframe id=’myiFrame’><div id=’targetDiv’><div id=’abc’> Hello World</div><script> function myfunction() { alert (“hi”);}</script></div></iframe>
This all works
My question is. How do I execute myfunction() at some later point in time. How do I find/reference the embedded JavaScript.
I know there are a lot of ifs and buts in this question. Please assume the DOM is ready etc.
I will try to execute myfunction() from an already loaded piece of JavaScript
(function(myframework, undefined ) {
myframework.ButtonClickMethod = function()
{
//this is the call to the dynamically loaded method
//but how do I find / reference this method
myfunction();
}
}(document.myframework = document.myframework || {} ));
Note: myframework.ButtonClickMethod is called from a button click at a time well after all HTML and script has been loaded.
The problem is also complicated by the fact that I cannot control where the piece of injected HTML/Javascript is placed. It has to go into the target div.
I can use JQuery, but prefer vanilla JavaScript.
Also, please ignore any typos in the question, I typed it in Word, it's put ' in etc. It's the mechanism of how to do it I'm interested in.
A less than appealing solution would be to use jQuery to select the script tag html contents. Then use something likethis answer to make it into its own function.
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.
I'm trying to write a function that will remove the footer's data-postion fixed attribute, then print the page. I have this linked with an onclick event, but it has no effect to the page.
function printpage(){
$('#footer').removeAttr('data-position');
javascript:window.print()
}
What am I doing wrong here?
There should not be a javascript word in there...
function printpage(){
$('#footer').removeAttr('data-position');
window.print()
}
I expect you were copying and pasting from the href of a page element, where the actual javascript code it prefixed with javascript: but inside executing javascript, it will produce an error.