I want to add a javascript function to change the link that has been copied by a user. With right-click > Copy link. I searched around, I tried adding an onclick event but nothing. I searched for something with document.addEventListener but nothing. Please give me help.
The thing thatI understand is that you want to change a link when it is copied to different on
<!DOCTYPE html>
<html>
<body>
Link1 is here
<script>
function myFunction() {
document.getElementById("demo").href = "https://stackoverflow.com";
document.getElementById("demo").innerHTML = "Link1 changed to Link2"
}
</script>
</body>
</html>
If you want the copied link to change then it is not possible : Instead you can replace the link with your choice before the copy that is initial link of your choice
The oncopy event occurs when the user copies the content of an element.
Tip : The oncopy event also occurs when the user copies an element, for example, an image, created with the element.
Tip : The oncopy event is mostly used on elements with type="text" but can be applied to other elements also.
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>
From this question i came to know text element's value can be changed by JS Set maximum number of item in Select List - html
can anyone give some code or some tips ?
My intention is not hacking, i need to know this, coz i'm writing a web app where most of the validation is done by JS
Edit
Looking for guide on running JS from client side on a page served by a server [on some text where it's readonly="true" ] !
For example, if you have a html text element like this:
<p id="textelement">I am a text element</p>
You can change the text inside with JS like this:
<script type="text/javascript">
document.getElementById("textelement").innerHTML = "New text inside the text element!";
</script>
You can use this technique with any HTML element which can contain text, such as options in a select list (<option> tag). You can select elements in other ways:
getElementById() Accesses the first element with the specified id
getElementsByName() Accesses all elements with a specified name
getElementsByTagName() Accesses all elements with a specified tagname
More info here.
PS - If you want to change the value of an element's attribute, and not its inner text, you should use the setAttribute() method; for example, if you have:
...
<option id="optionone" value="red">Nice color</option>
...
and want to change the value attribute, you should do:
<script type="text/javascript">
document.getElementById("optionone").setAttribute("value", "green");
</script>
More about this here.
Can anyone tell me what innerHTML does in javascript and give me example how I can use it?
The innerHTML property is used to get or set the HTML content of an element node.
Example: http://jsfiddle.net/mQMVc/
// get the element with the "someElement" id, and give it new content
document.getElementById('someElement').innerHTML = "<p>new content</p>";
// retrieve the content from an element
var content = document.getElementById('someElement').innerHTML;
alert( content );
The innerHTML property is part of the Document Object Model (DOM) that allows Javascript code to manipulate a website being displayed. Specifically, it allows reading and replacing everything within a given DOM element (HTML tag).
However, DOM manipulations using innerHTML are slower and more failure-prone than manipulations based on individual DOM objects.
innerHTML is a property of every element. It tells you what is between the starting and ending tags of the element, and it also let you sets the content of the element.
property describes an aspect of an object. It is something an object has as opposed to something an object does.
<p id="myParagraph">
This is my paragraph.
</p>
You can select the paragraph and then change the value of it's innerHTML with the following command:
document.getElementById("myParagraph").innerHTML = "This is my paragraph";
For understanding innerHTML property you first need to go through the basics of the javascript object and HTML DOM(Document object model). I will try to explain:
JavaScript objects consist of properties and methods.
for rendering HTML document web browser creates a DOM, in DOM every HTML element is treated as a JavaScript Object which has a set of properties and methods associated with it.
Now coming to your Question:
HTML code:
<p id= "myPara"> We love to Code.</p>
JavaScript code:
alert(document.getElementById("myPara").innerHTML);
here, document.getElementById("myPara") will return our html element as a javascript object which has pre-defined property innerHTML.
innerHTML property contains the content of HTML tag.
Hope this will help.
You can run following HTML code in your browser to understand it:
<html>
<body>
<p id= "myPara"> We love to Code.</p>
<script>
alert(document.getElementById("myPara").innerHTML);
</script>
</body>
</html>
Each HTML element has an innerHTML property that defines both the HTML code and the text that occurs between that element's opening and closing tag. By changing an element's innerHTML after some user interaction, you can make much more interactive pages.
However, using innerHTML requires some preparation if you want to be able to use it easily and reliably. First, you must give the element you wish to change an id. With that id in place you will be able to use the getElementById function, which works on all browsers.
You can collect or set the content of a selected tag.
As a Pseudo idea, its similar to having many boxes within a room and imply the idea 'everything within that box'
The innerHTML fetches content depending on the id/name and replaces them.
<!DOCTYPE html>
<html>
<head>
<title>Learn JavaScript</title>
</head>
<body>
<button type = "button"
onclick="document.getElementById('demo').innerHTML = Date()"> <!--fetches the content with id demo and changes the innerHTML content to Date()-->
Click for date
</button>
<h3 id = 'demo'>Before Button is clicked this content will be Displayed the inner content of h3 tag with id demo and once you click the button this will be replaced by the Date() ,which prints the current date and time </h3>
</body>
</html>
When you click the button,the content in h3 will be replaced by innerHTML assignent i.e Date() .
innerHTML explanation with example:
The innerHTML manipulates the HTML content of an element(get or set). In the example below if you click on the Change Content link it's value will be updated by using innerHTML property of anchor link Change Content
Example:
<a id="example" onclick='testFunction()'>Change Content</a>
<script>
function testFunction(){
// change the content using innerHTML
document.getElementById("example").innerHTML = "This is dummy content";
// get the content using innerHTML
alert(document.getElementById("example").innerHTML)
}
</script>
Each HTML element has an innerHTML property that defines both the HTML code and the text that occurs between that element's opening and closing tag. By changing an element's innerHTML after some user interaction, you can make much more interactive pages.
However, using innerHTML requires some preparation if you want to be able to use it easily and reliably. First, you must give the element you wish to change an id. With that id in place you will be able to use the getElementById function, which works on all browsers.
After you have that set up you can now manipulate the text of an element. To start off, let's try changing the text inside a bold tag.
JavaScript Code:
<script type="text/javascript">
function changeText(){
document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';
}
</script>
<p>Welcome to the site <b id='boldStuff'>dude</b> </p>
<input type='button' onclick='changeText()' value='Change Text'/>
This answer is from here
It represents the textual contents of a given HTML tag. Can also contain tags of its own.
It does literally what it says - it returns the inner content of the specified HTML element. The most minimal self contained demonstration is shown below:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
alert(document.getElementById("myElement").innerHTML);
</script>
<div id="myElement">
Hello, world!
</div>
</body>
</html>
Running the javascript code within the tag will popup a notification saying
"Hello, world!"
I have the following html on a page:
<h1 class="theme-color-3">Knowledge Portal Site</h1>
This is rendered dynamically.I dont want the word Site after 'Knowledge Portal'.I dont know where the word Site is hardcoded,so i wrote the following jquery code to remove that word.
$(document).ready(function() {
$('h1.theme-color-3').html($('h1.theme-color-3').html().replace('Site',''));
});
But the problem is that because this code executes only after the whole page has finished loading,the word Site shows for some time and then disappears.
Is there a way to prevent that ?
Thank You
Place a <script> element right after the <h1> element, like so:
<h1 class="theme-color-3">Knowledge Portal Site</h1>
<script type="text/javascript">
$('h1.theme-color-3').text($('h1.theme-color-3').text().replace('Site',''));
</script>
This will ensure the script is processed immediately after the element is parsed, so make sure the jQuery script is in the <head> or at least further up the document. Also, use text() instead of html() if you're not applying HTML. It's more efficient.
You can use CSS to set the element to display:none, but that would leave those with javascript turned off without the element at all.
Basically there is no good solution.