HTML Copy to Clipboard and Close Tab [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 12 months ago.
Improve this question
I want to create an HTML script that does the following:
Copies a URL to the clipboard.
On a black background — Shows a green tick and says "Link Copied to Clipboard" for a couple of seconds in white text.
Closes the current tab where this script is running.
I want all 3 of these actions to happen automatically when the file is opened in the order above. Ideally, I'd like it to take less than 5 seconds. How can I go about doing this? Thanks in advance.
Reason: I'm going to add a "Copy Link" button to my website and this is the only way I can do it. I use Google Sites.

try this code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- button to trigger the action -->
<button id="button">close window</button>
<h1 id="text">some text</h1>
<script>
// get the button
const button = document.getElementById("button");
//add event listener to the button
button.addEventListener("click", () => {
// get the text
const text = document.getElementById("text");
//copy the text to the clipboard
navigator.clipboard.writeText(text.innerHTML).then(() => {
//add time out to close the window
setTimeout(() => {
window.close();
}, 3000);
// add your toaster here to show the text copied
// hare is some reference https://www.w3schools.com/howto/howto_js_toast_message.asp
text.innerHTML = "Copied to clipboard!";
});
});
</script>
</body>
</html>

Related

Creating an HTML page from a template with DIFFERENT script files [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 days ago.
Improve this question
What is the most beginner way to put some little changes into an HTML page?
For example, we need to choose between "./textC.js" and "./imgC.js" files, both having function countCows() {} of different algorithms.
I've spent lots of time browsing through "changing script src dynamically" articles, but location.reload() reloads the whole page (or a <div>, I haven't found the pattern yet), some things don't work at all, some answers use complicated high software technologies I have never seen before.
This be the template html page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Template page</title>
<link id="sizescheme" rel="stylesheet" type="text/css" href="./texty.css" media="screen"/>
</head>
<body class="custombackground">
<div id="commonblock">
<button id="coucow" onclick="countCows()">Count the cows</button>
<div id="countResult"></div>
</div>
<div id="textOnly">
Something that has nothing to do with images
</div>
<script id="counter" src="./textC.js"></script>
</body>
</html>
The caller HTML page has something like this:
<div id="initial-things" >
<button id="txb" onclick="setType("t")"> Text </button><br />
<button id="imb" onclick="setType("i")"> Image </button>
</div>
And could have done this if it were the same page as the template (but scripts do not load dynamically, see the first paragraph):
<script>
function setType(param) {
if (param == "i") {
document.getElementById("sizescheme").href = "./imgy.css";
document.getElementById("counter").href = "./imgC.js";
document.getElementById("textOnly").style.visibility = "collapse";
}
if (param == "t") {
document.getElementById("sizescheme").href = "./texty.css";
document.getElementById("counter").href = "./textC.js";
}
}
</script>
So, how does one create a page from a template?

Link from Form HTML/JS [duplicate]

This question already has answers here:
How is the default submit button on an HTML form determined?
(15 answers)
Closed 1 year ago.
I'm currently trying to make a program in which you enter a link into an HTML form and when you click a button it sends you to that link. However, when I click the button the page just clears the form. I'm a Python native and a newbie to HTML/JS so the way I'm structuring my code may be why:
<form>
<input type="url" id="link" placeholder="Enter link of website:" required>
<br>
<button class="outline" id="open">Create gate</button>
</form>
<script type="text/javascript">
document.getElementById("open").onclick = () =>
location.assign(String(document.getElementById("link").value));
</script> </form>
Since, you are using a form. Your Button
<button class="outline" id="open">Create gate</button>
is acting as the form submit button and hence it refreshes the page before executing the location.assign() method. There are many ways to fix this.
One simple way is to exclusively tell the browser that this button is not the submit button, we can do that by using type="button" attribute in our button.
Create gate
You can use e.preventDefault() on your form submit to stop refreshing of the page.
Try the below code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Location Object</title>
</head>
<body>
<form>
<input type="url" id="link" placeholder="Enter link of website:" required>
<br>
<button class="outline" id="open">Create gate</button>
</form>
<script type="text/javascript">
document.getElementById("open").addEventListener('click', (e) => {
e.preventDefault();
location.assign(String(document.getElementById("link").value));
});
</script>
</form>
</body>
</html>
Your code, exactly as provided, pasted into a minimal HTML5 boilerplate template, works in the Textastic code editor and in Safari running on localhost.
Perhaps some other JavaScript in the vicinity of your event listener is breaking the arrow function. Maybe bracketing the one function statement could help?

Chnaging the data attribute inside the div doesn't change image for 360 spin view

I am using js-cloudimage-360-view.min.js to get a 360 view of images. I am getting the images perfectly, but I am unable to change the images by clicking a button.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class = 'test' style="width: 400px; margin: 100px auto;">
<div
class="cloudimage-360"
data-folder="images/"
data-filename="{index}.jpg"
data-amount="22"
>
</div>
<div>
<button>Click</button>
</div>
<script src="main.js"></script>
<script src="js-cloudimage-360-view.min.js"></script>
</body>
</html>
main.js
const img_box = document.querySelector('.cloudimage-360')
const btn = document.querySelector('button')
btn.addEventListener('click',()=>{
img_box.dataset.folder = 'temp_images/'
img_box.dataset.filename = '{index}.png'
console.log(img_box.dataset)
})
console.log(img_box.dataset)
Here is the folder structure
images
temp_images
index.html
js-cloudimage-360-view.min.js
main.js
Now in order for the 360 view to work, I have to specify the data-folder, data-filename and data-amount correctly inside the div tag and it is working fine. But I want to change the data-folder = 'temp_images/' and data-filename = '{index}.png' when the button is clicked to show a different set of images. I can see all the changes have been done correctly in the console, but the image remains the same. How can I get the images from different folders after clicking the button?
Here is the Github link
https://github.com/scaleflex/js-cloudimage-360-view
Here is a youtube tutorial
https://www.youtube.com/watch?v=uEl4Q6dG7BA&t=111s
I suspect you'll need to destroy the component, change the attributes, and then init it again.
window.CI360.destroy();
img_box.dataset.folder = 'temp_images/';
img_box.dataset.filename = '{index}.png';
window.CI360.init();
If it still doesn't work, then it would probably be best to ask the author(s) directly.
I found a solution like MV Agusta did on his site. Call the 360 ​​views of two different colors to the page at the same time and when the button is clicked, set the opacity of one (which you want to show) to 1 while the other (which you want to hide) to 0.

How to run a JavaScript function on an input field when a button is pressed [duplicate]

This question already has answers here:
How do I get the value of text input field using JavaScript?
(16 answers)
Closed 6 years ago.
I'm trying to remember how to associate HTML and JS through different actions, so I just wrote a simple reverse script (any number would be turned into a string and reversed)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Number Reverser</h1>
<script>
function Reverser(n){
n = n + "";
return n.split("").reverse().join("");
}
function ExecuteRev(){
console.log(Reverser());
}
</script>
<input id="bubu">
<button onclick="ExecuteRev()">REVERSE 'EM</button>
</body>
</html>
The ridiculous part is that the console returned
denifednu
My genius JS level managed to reverse the error itself.
How I can connect the input to the function to be executed on the button press and displayed in a div (any div, not console)?
I'm not entirely sure what you mean but I think you might be talking about using the DOM. For instance, to update a div with id="x", do the following.
document.getElementById("x").innerHTML = "New content";

How to make a Go url bar in html+css [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Im a noob at js, and I would like to make a go bar like at the top of browsers in html and js. It will go to the url in the box when the button is pressed nothing more, nothing less. Heres about what i want:
In javascript you just have to add an event listener in the "Go" button.
Then when you click the button, you just have to redirect the url according to the text field value.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="field" />
<button id="myBtn">Go</button>
<script type="text/javascript">
document.getElementById("myBtn").addEventListener("click", function(){
var url = document.getElementById("field").value;
window.location.href = url;
// OR
window.open(url);
});
</script>
</body>
</html>
With this code, if you enter a value in the text field and click the button. The url will add your value at the end.
For example if you are testing on the url localhost/ and you enter "test", javascript will redirect you to localhost/test.
To redirect correctly you must write "http://" or "https://" at the beginning

Categories

Resources