Dear StackOverflow Community,
I have this Code to copy the URL to the Clipboard. The problem is, after clicked it stays on "kopiert". I want it to change back. I know that this question is asked 100x times and there is code on the Internet. My problem is, that I dont know much of programming and tried the codes on the web. Couldnt implement it. I really need help. Am really thankful for any.
Thanks in advance.
Code:
<div class="background">
<center>
<button class="clipboard">Link kopieren</button>
</center>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var $temp = $("<input>");
var $url = $(location).attr('href');
$('.clipboard').on('click', function() {
$("body").append($temp);
$temp.val($url).select();
document.execCommand("copy");
$temp.remove();
$("button").text("kopiert!");
})
</script>
You could use setTimeout() here to run a function that is delayed by a set amount of time. For example, we could update your JavaScript to be:
var $temp = $("<input>");
var $url = $(location).attr('href');
$('.clipboard').on('click', function() {
const originalText = $("button").text();
$("body").append($temp);
$temp.val($url).select();
document.execCommand("copy");
$temp.remove();
$("button").text("kopiert!");
// Run something in 2.5 seconds to revert back to the button's text
setTimeout(function() {
$("button").text(originalText);
}, 2500); // 2.5 seconds
})
Related
I want to have a picture when clicked, change from image 1 > image 2 > image 3 > back to image 1. And at the same time when they click it, it copies a hidden caption belonging to the picture that says "COPY THIS TEXT". I used the code, which I will place below of this post. It seems to work when I run it here. But when I place it on my website, it doesnt work.
So what I did is I went to inspect elemet and to console. It throws out a Uncaught SyntaxError: Unexpected token '<' on the places where I start the code with a script command. Im not interested in using a .js input, just want a html edit.
Im not sure what Im doing wrong. Could someone look into the code for me? Im not every experienced with Javascript.
It seems to run okay when I test the code on jfiddle or W3schools Try it editor.
Currently, I just need the javascript to work on one portion of just one of my post entry and Not the whole website. It is very specific to that section. Im currently pasting the code in wordpress under: Create Post >> Text Tab
as an html input (i.e. just copied and paste the code below).
The kind people here have managed to help me get the image to toggle. However, it is not able to copy the text. Can anyone help? It states ReferenceError: copypass is not defined
Here is the code below
<html>
<body>
<p>
<img src='http://www.clipartbest.com/cliparts/RiA/66K/RiA66KbMT.png' id="imgClickAndChange" onclick="copy_password() ; changeImage()"/>
</p>
<script language="javascript">
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "http://www.clipartbest.com/cliparts/RiA/66K/RiA66KbMT.png") {
document.getElementById("imgClickAndChange").src = "http://www.wpclipart.com/education/animal_numbers/animal_number_2.png";
}
else if (document.getElementById("imgClickAndChange").src == "http://www.wpclipart.com/education/animal_numbers/animal_number_2.png") {
document.getElementById("imgClickAndChange").src = "https://secureservercdn.net/166.62.112.199/smt.db9.myftpupload.com/wp-content/uploads/2012/06/Number-3-bright.png";
}
else if (document.getElementById("imgClickAndChange").src == "https://secureservercdn.net/166.62.112.199/smt.db9.myftpupload.com/wp-content/uploads/2012/06/Number-3-bright.png") {
document.getElementById("imgClickAndChange").src = "http://www.clipartbest.com/cliparts/RiA/66K/RiA66KbMT.png";
}
}
</script>
<center>
<p hidden> <span id="pwd_spn" class="password-span">COPY THIS TEXT</span></p>
<script>
document.getElementById("cp_btn").addEventListener("click", copy_password);
function copy_password() {
var copyText = document.getElementById("pwd_spn");
var textArea = document.createElement("textarea");
textArea.value = copyText.textContent;
document.body.appendChild(textArea);
textArea.select();
document.execCommand("Copy");
textArea.remove();
}
</script>
</body>
</html>
i didn't fully understand you , but i tweaked your code , it working fine for me i hope it works for you too
by the way make sure the scripts are above if you are going to change so you don't get that the fuctions aren't declared
<html>
<head>
<script language="javascript">
function changeImage() {
if (document.getElementById("imgClickAndChange").src == "http://www.clipartbest.com/cliparts/RiA/66K/RiA66KbMT.png") {
document.getElementById("imgClickAndChange").src = "http://www.wpclipart.com/education/animal_numbers/animal_number_2.png";
}
else if (document.getElementById("imgClickAndChange").src == "http://www.wpclipart.com/education/animal_numbers/animal_number_2.png") {
document.getElementById("imgClickAndChange").src = "https://secureservercdn.net/166.62.112.199/smt.db9.myftpupload.com/wp-content/uploads/2012/06/Number-3-bright.png";
}
else if (document.getElementById("imgClickAndChange").src == "https://secureservercdn.net/166.62.112.199/smt.db9.myftpupload.com/wp-content/uploads/2012/06/Number-3-bright.png") {
document.getElementById("imgClickAndChange").src = "http://www.clipartbest.com/cliparts/RiA/66K/RiA66KbMT.png";
}
}
function copypass() {
let copyText = document.getElementById("pwd_spn");
let pass = copyText.textContent;
let textArea = document.createElement("textarea");
textArea.value = pass;
document.body.appendChild(textArea);
textArea.select();
document.execCommand("Copy");
textArea.remove();
}
</script>
</head>
<body>
<p>
<img src='http://www.clipartbest.com/cliparts/RiA/66K/RiA66KbMT.png' id="imgClickAndChange" onclick="changeImage() ; copypass()"/>
</p>
<p hidden> <span id="pwd_spn" class="password-span">COPY THIS TEXT</span></p>
</body>
</html>
you should clear all the tags
<p> and </p>
I'm interested on learn about the programming world and I'm trying some basics about making simple web plugins. The thing is I'm not able to make my button run a little JS, any tip? Thanks a lot!!
<button id="button1" onclick="myFunction()">Start the script</button>
<script type="application/javascript">
document.addEventListener("button1", myFunction);
function myFunction() {
var para = document.createElement("p");
var ht1 = '<p class="pop">Working</p>';
var ht2 = '<p class="image"><img src="image.png"></p>';
};
</script>
First of all if you want that something would happen you need to write that in the function. You already wrote variables, but you did nothing with them, so nothing could happen.
Try this :
<p id="demo" onclick="myFunction()">Click me to change my HTML content (innerHTML).</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed!";
}
</script>
I'm really new at this and I need a random button on my page that would show a new line of information in a div every time someone click on the random button. I was also wondering if there is over 800 lines is it possible to put it in an outside file as txt or html.
Here is what I got so far and well it doesn't work and I'm getting confuse... Please help
<script type="text/javascript" src="jquery-2.2.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#text').hide();
$('a#random').click(function(){
$('#text').toggle();
})
function RndText() {
var rannum= Math.floor(Math.random()*textarray.length);
document.getElementById('#text').innerHTML=textarray[rannum];
}
var textarray = [
"Hello",
"How are you",
"Good Bye"
];
$("#text").load()
})
</script>
<body>
<div id="text">Line to Show</div>
RANDOM
</body>
Uh. Pretty much this:
$('a#random').click(function(){
$('#text').toggle();
RndText(); //you're good
});
Although I will point out that RndText() uses document.getElementById when it could use $("#text") instead. (there's a .html() method that will write the value instead of the .innerHTML property).
document.getElementById is also not currently working because you used "#text" instead of "text", jQuery uses CSS selectors, getElementById does not.
Add execution of RndText when you clicks on Random button.
$('a#random').click(function(){
$('#text').show();
RndText();
})
This will give you a button and you can run this code by clicking the button below. However, I did not quite understand you second part of the question: 800 lines in separate file, what do you wanna do with it? Tell me so that I can helo you further...
Editted:
<?php
$data = file_get_contents('demo.txt');
$lines= split("\n",$data);
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
var textarray = <?php echo json_encode($lines); ?>;
function RndText() {
var rannum= Math.floor(Math.random()*textarray.length);
$('#text').text(textarray[rannum]);
console.log(textarray[rannum]+" "+rannum+" "+textarray.length);
}
$(document).ready(function(){
$('#text').hide();
$('#random').click(function(){
$('#text').show();
RndText();
});
});
</script>
<body>
<div id="text"></div>
<button id="random">RANDOM</button>
</body>
I've stated previously that I am very new to JavaScript and HTML. I'm creating a small search tool and I'm very confused as to how to get text from a URL and put it in my JS array.
For example, let's say the URL is: http://www.somethingrandom.com/poop
In that URL, there's a couple of words: "something", "everything", "nothing"
Literally just that. It's in a pre tag in HTML, and that's it.
Now, my JS code, I want it to open up that URL, and take those words and place them in a string/list/array, whatever, it could be anything as long as it can happen, I can manipulate it further later.
I have this so far:
<html>
<head>
<script type = "text/javascript">
function getWords(){
var url = "http://www.somethingrandom.com/poop"
var win = window.open( url );
window.onload = function(){
var list = document.getElementsByTagName("pre")[0].innerHTML;
var listLength = list.length;
alert( listLength);
}
}
</script>
</head>
<body>
<button id="1" onClick="getWords();">Click Here</button>
</body>
</html>
It doesn't work however.. And I'm not sure why. :( Please help.
Make an AJAX request and you will have access to the returned content.
Using jQuery:
function getWords(){
var url = "http://www.somethingrandom.com/poop"
$.get(url, function(data) {
var list = $('pre:eq(0)', data).html;
var listLength = list.length;
alert( listLength);
}, 'html');
}
<html>
<head>
</head>
<body>
<div id = "start">
<h3>Start</h3>
<script>
if(Go==false)
document.write("<p>None </p>");
else
document.write("<p>Month: Day: Hour: Min: </p>");
</script>
</div>
<script>
var change = function(){
document.getElementById('start').innerHTML +=document.write("<p>NO</p>");
};
</script>
<input type = "button" value =start onClick = "change(); return false;"/>
<body>
</html>
With this it refreshes the page and I need it to be added to the div "start". Any Ideas? I have been looking up things online with fixes and none seem to work for me. I use chrome, I don't know if that will help.
Try this:
var change = function(){
document.getElementById('start').innerHTML += "<p>NO</p>";
};
This is a similar question of question on SO.
Is as to avoid of the use document.write("<p>NO</p>"); because this needs to refresh page.
Then I suggest for you use document.getElementById('start').innerHTML +="<p>NO</p>";
Or create the element!!
var p= document.createElement('P');
p.appendChild( document.createTextNode("NO") );
document.getElementById("start").appendChild(p);
Yup, what sjkm said. document.write does not return anything, it just appends whatever you give it to the end of the document. Also, your Go variable isn't declared and has no value assigned to it