I'm trying to use zeroclipboard 2.2.0.
<!DOCTYPE html>
<html>
<head lang="en">
<script src="bower_components/zeroclipboard/dist/ZeroClipboard.js"></script>
</head>
<body>
<div id="first">1111111</div>
<div id="second">2222222222</div>
<button id="d_clip_button" class="my_clip_button" data-clipboard-target="first">Copy from first div</button>
<button data-clipboard-target="second">Copy from second div</button>
</body>
</html>
But it is not working for me. Could you point at mistake? I cannot find proper examples because they are quite oudated.
If you can suggest any alternative to zeroclipboard I will consider it.
This works for me:
<div id="first">1111111</div>
<div id="second">2222222222</div>
<button id="button1" data-clipboard-target="first">Copy from first div</button>
<button id="button2" data-clipboard-target="second">Copy from second div</button>
<script>
var zeroClipboard = new ZeroClipboard();
zeroClipboard.clip(document.querySelector("#button1"));
zeroClipboard.clip(document.querySelector("#button2"));
zeroClipboard.on('copy', function(event) {
});
</script>
I didnt use that, if you want, here a code without zeroclipboard 2.2.0.
HTML
<div id="first">1111111</div>
<div id="second">2222222222</div>
<button onclick="copyToClipboard('#first')">Copy from first div</button>
<button onclick="copyToClipboard('#second')">Copy from second div</button>
JS:
function copyToClipboard(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
Related
My code is supposed to change the text of a paragraph.
The code- (both .js and .html files)
<!DOCTYPE html>
<html>
<head>
<title>Java's Crypt</title>
</head>
<body>
<p Id="bello">i will change</p>
<button type="button" onclick="myFunction()">click to change</button>
<script src="crypt.js"></script>
</body>
</html>
(javascript file)
function myFunction() {
document.getElementById("bello").innerhtml = "toldya";
}
First there is id not Id in HTML
<p id="bello">i will change</p>
and in JS, You can use textContent or innerText to change text
document.getElementById("bello").textContent = "toldya";
function myFunction() {
document.getElementById("bello").textContent = "toldya";
}
<p id="bello">i will change</p>
<button type="button" onclick="myFunction()">click to change</button>
As per Jax-p's comment, document.getElementById("bello").innerText = "toldya"; should work.
Also, it is best practice to use lower case for your html attributes e.g. Id should just be id
I am trying to change the font size by clicking on button and using paragraph id
Trying to create a button which is on click will change the font size of my first javascript
code :-
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
<button type="button" onclick='document.getElementById("demo").style.fontSize="20px";' >click me</button>
</script>
</body>
</html>
my output is coming : JavaScript in Body
actual output which i want to come:
JavaScript in Body
My First JavaScript
button(click me)
You should get the button out of the script tag.
it should look like this.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<button type="button"
onclick='document.getElementById("demo").style.fontSize="20px";' >click me</button>
<p id="demo">
</p>
</body>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</html>
The button shouldn't be inside the script tag. Put it before or after the </script> tag.
Only JavaScript should be in the script tag.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
<button type="button" onclick='document.getElementById("demo").style.fontSize="20px";' >click me</button>
</body>
</html>
I am trying to copy the link of current page using ZeroClipboard and I don't know what to do further.
This is my code until now. How can I copy the link?
function copyLink() {
document.getElementById("copy").value += window.location.href;
var link = document.getElementById("copy").value;
var client = new ZeroClipboard();
client.setText(link);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/zeroclipboard/2.2.0/ZeroClipboard.Core.min.js"></script>
<html>
<head>
<title>Copy</title>
</head>
<body>
<div>
<button id="copyBtn" onclick="copyLink()">Copy link</button>
<textarea id="copy" style="display: none;"></textarea>
</div>
</body>
</html>
Thanks !
I have multiple divs inside a form tag.
<form id="RegdForm">
#Html.Partial("../Partials/_PatientEdit")
The partial view,
<div id="zafar"> <h3>Zafar</h3> </div>
When I try to hide all the divs its working like below
<script type="text/javascript">
$('Div').hide();
</script>
But when I try to hide specific Div it's not hiding at all.
<script type="text/javascript">
$('#zafar').hide();
</script>
I am using ASP.Net MVC 5 with Razor.
Any help appreciated.
Try this
<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="zafar">
<h3>Zafar</h3>
</div>
<div class="well well-sm">
<button class="btn btn-success" type="submit">Save</button>
<button class="btn btn-primary" type="button" data-bind="click: printPatient">Print</button>
<button class="btn btn-danger" type="button" data-bind="click: resetForm">Reset</button>
</div>
<button id="hide">Hide</button>
<button id="hideAll">Hide All</button>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$('#zafar').hide();
});
$("#hideAll").click(function(){
$('Div').hide();
});
});
</script>
</body>
</html>
Here is your answer:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#zafar").hide();
});
</script>
Add your respective function inside this.
$(function() {
$('#zafar').hide();
})
After a long googling I found out one solution to this.
As the div was inside the form tag, the way accesing the div can be done as,
<script type="text/javascript">
$('#RegdForm #zafar').hide();
It helped me to achieve the task.
I just started learning JavaScript and am wondering why this simple snippet hangs when I click on the "Call function" button. What am I missing?
<html>
<head>
<script type="text/javascript">
function myfunction()
{
document.write("hello");
}
</script>
</head>
<body>
<form>
<input type="button"
onclick="myfunction()"
value="Call function">
</form>
</body>
</html>
You need to write inside an element or give an element a value, or you should use document write like that :
<html>
<head>
<script type="text/javascript">
function myfunction()
{
document.getElementById("lblMessage").innerText = "hello";
document.getElementById("txtMessage").value = "hello";
//document.write("hello");
}
</script>
</head>
<body>
<form>
<script type="text/javascript">
document.write("This is written while page processed by browser !<br />");
</script>
<input type="text" id="txtMessage" /><br />
<span id="lblMessage"></span><br />
<input type="button"
onclick="myfunction()"
value="Call function">
</form>
</body>
</html>
If you simply want to see your button doing something then try:
alert("Hello");
instead of the document.write.
Where do you expect the function to output its "hello"? Right into the button's source code? That makes no sense. The browser is confused and hangs.
Document.write doesn't magically insert something at the end of your document. It writes its stuff out right there where it is called.
Not too sure what you mean by "hang"... Try this out... The alerts can be removed, but will inform you of where it is at in execution...
<html>
<head>
<script type="text/javascript">
function myFunction() {
//for debugging
alert('Made it into function');
document.getElementById('MyOutputDiv').innerHTML = 'Word To Your Mom...';
//for debugging
alert('function complete');
}
</script>
</head>
<body>
<input type='button' onclick='myFunction();' value='Call Function'>
<br>
<div id='MyOutputDiv'></div>
</body>
</html>
document.write, but where? You have to specify this.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hello</title>
</head>
<body>
<pre><script type="text/javascript">
function myfunction() {
d = document.getElementById('hello');
d.style.display = "block";
d = document.getElementById('callme');
d.style.display = "none";
}
</script>
</pre>
<div id="hello" style="display:none">
Hello
</div>
<div id="callme">
<input type="button"
onclick="myfunction()"
value="Call function">
</input>
</div>
</body>
</html>
I can't explain the "hang" but please take a look at this page for a primer on document.write: http://javascript.about.com/library/blwrite.htm I would also like to second that you probably want to write to a specific element in the page rather than just overwriting the entire page.