I am looking to copy the text written in an input when the user click on a button. How can I do it ?
Here is my HTML structure :
<!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>2b2tyoung.tk</title>
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
</head>
<body>
<div class="container">
<div label>
Join server
</div>
<div class="copy-text">
<input type="text" class="text" value="2b2tyoung.tk">
<button>
<i class="fa fa-clone"></i>
</button>
</div>
</div>
</body>
</html>
Here I selected the fa-clone icon, added a listener on click, then I copied the value of the input.
document.querySelector(".fa-clone").addEventListener("click", () => {
let input = document.querySelector(".copy-text input");
navigator.clipboard.writeText(input.value);
console.log("copied "+input.value)
})
<div class="copy-text">
<input type="text" class="text" value="2b2tyoung.tk">
<button>
<i class="fa fa-clone">Clone</i>
</button>
</div>
<!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>2b2tyoung.tk</title>
<link rel="stylesheet" href="style.css" />
<script src="main.js"></script>
</head>
<body>
<div class="container">
<div label>Join server</div>
<div class="copy-text">
<input type="text" class="text" value="2b2tyoung.tk" />
<button onclick="copyInputValue()">
<i class="fa fa-clone"></i>
</button>
</div>
</div>
</body>
</html>
<script>
function copyInputValue() {
const ipt = document.querySelector("#app input");
ipt.select();
const copyed = document.execCommand("copy");
if (copyed) {
alert("copy success!");
} else {
alert("copy failed!");
}
}
</script>
Related
I have a problem guys. As a beginner, I am trying to check the length of password and return the result, but it doesn't work. after clicking button, it does nothing. What am I doing wrong?
<!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>
<script>
function checkpassword(){
var pas=document.getElementByName(passcode).value;
var x=pas.length;
if(x<8){
document.getElementById(message).innerHTML="Error 404!";
}
else{
document.getElementById(message).innerHTML="It's acceptable"
}
}
</script>
<body>
<input type="password" name="passcode" placeholder="Enter password to check">
<input type="submit" value="submit" onclick="checkpassword()">
<p id="message"></p>
</body>
</html>
#'Felix Kling' and #'Daniel A. White have given some hints in the comments because you will have to pass the names and ids as strings. But another issue is that .getElementByName() is not a function. You can try this (note that I have used .getElementsByName (plural) and referenced the zero-ith index:
<!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>
<script>
function checkpassword(){
var pas=document.getElementsByName('passcode')[0].value;
var x=pas.length;
if(x<8){
document.getElementById("message").innerHTML="Error 404!";
}
else{
document.getElementById("message").innerHTML="It's acceptable"
}
}
</script>
<body>
<input type="password" name="passcode" placeholder="Enter password to check">
<input type="submit" value="submit" onclick="checkpassword()">
<p id="message"></p>
</body>
</html>
I am trying to get the input value as my result but after clicking on the button I am getting 'undefined' as the console result. Please help to understand the reason. Sharing the HTML and js 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">
<link rel="stylesheet" href="movie-search-engine.css">
<script src="scripts/movie-search-engine.js" defer></script>
<title>Movie Search Engine</title>
</head>
<body>
<div class="searchBox">
<input type="text" class="searchBox" placeholder="Movie Name">
<button onclick="moviesearchEngine()" class="searchBoxID" >Search</button>
</div>
<div class="movieDetails">
<h2 class="movieTitle">Movie Title</h2>
<div class="movieData">
<p class="yearofRelease">Year of Release</p>
<p class="movieTitle">Movie Title</p>
<p class="genre">Genre</p>
<p class="director">Director</p>
<p class="plot">Plot</p>
</div>
</body>
</html>
const moviesearchEngine=()=>{
let searchBox = document.querySelector('.searchBox');
console.log(searchBox.value)
}
You are using a class for multiple elements which is why undefined is shown. Among many ways, I will discuss two here, you have to either use indices with classes if using queryselector to get the correct element or use an ID to select the input element. Here I have used ID to get the input searchbox. See the following code:
const moviesearchEngine = () => {
let searchBox = document.querySelector('#searchBoxInput');
console.log(searchBox.value)
}
<!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">
<link rel="stylesheet" href="movie-search-engine.css">
<script src="scripts/movie-search-engine.js" defer></script>
<title>Movie Search Engine</title>
</head>
<body>
<div class="searchBox">
<input type="text" id="searchBoxInput" placeholder="Movie Name">
<button onclick="moviesearchEngine()" class="searchBoxID">Search</button>
</div>
<div class="movieDetails">
<h2 class="movieTitle">Movie Title</h2>
<div class="movieData">
<p class="yearofRelease">Year of Release</p>
<p class="movieTitle">Movie Title</p>
<p class="genre">Genre</p>
<p class="director">Director</p>
<p class="plot">Plot</p>
</div>
</body>
</html>
Your div <div class="searchBox"> also contain a class "searchBox" so it selected that.
Fixed: Add an input selector after class selector.
const moviesearchEngine=()=>{
let searchBox = document.querySelector('.searchBox input');
console.log(searchBox.value)
}
<!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">
<link rel="stylesheet" href="movie-search-engine.css">
<script src="scripts/movie-search-engine.js" defer></script>
<title>Movie Search Engine</title>
</head>
<body>
<div class="searchBox">
<input type="text" class="searchBox" placeholder="Movie Name">
<button onclick="moviesearchEngine()" class="searchBoxID" >Search</button>
</div>
<div class="movieDetails">
<h2 class="movieTitle">Movie Title</h2>
<div class="movieData">
<p class="yearofRelease">Year of Release</p>
<p class="movieTitle">Movie Title</p>
<p class="genre">Genre</p>
<p class="director">Director</p>
<p class="plot">Plot</p>
</div>
</body>
</html>
How do i make a get request to https://my-ocular.jeffalo.net/api/users/PoIygon and display the "status" on status, "color" is the background color of the id "color" and "name" has the name on this html 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>YAY</title>
<link rel="shortcut icon" href="/logo - Copy.png" type="image/png">
</head>
<body>
<div class="wrapper">
<span id="name">name</span>
/
<span id="status">
status
<div id="color">css background is the color</div>
</span>
</div>
</body>
</html>
My solution is to use fetch api and create the content dynamically. There was a slight issue with your html, a div element is not able to be a child of a span element so I modified it slightly. I hope this works for you.
const wrapper = document.querySelector('.wrapper');
function createContent(data) {
const content = `
<div id="color" style="background-color: ${data.color};">
<span id="name">${data.name}</span>
/
<span id="status">${data.status} </span>
</div>
`;
wrapper.insertAdjacentHTML('beforeend', content);
}
fetch('https://my-ocular.jeffalo.net/api/user/PoIygon')
.then(response => response.json())
.then(data => createContent(data))
.catch((error) => console.log(error));
<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>YAY</title>
<link rel="shortcut icon" href="/logo - Copy.png" type="image/png">
</head>
<body>
<div class="wrapper">
<!-- add JS dynamically here -->
</div>
</body>
</html>
For the past day ive been banging my head to the wall i just cant get this to work
every time i try to create a to do list it returns undefined and i cant seem to detect what went wrong with the code
Im still in the learning process so please go easy
function addToList() {
var item = document.getElementById("candidate").Value;
var text = document.createTextNode(item);
var li = document.createElement("li");
li.appendChild(text);
document.getElementById("toDoList").appendChild(li);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/style.css" />
<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>
<section>
<div class="container">
<div class="userToDoList">
<input id="candidate" class="userInput" type="text" placeholder="New List..." />
<button onclick="addToList()">Add</button>
</div>
<div class="addedLists">
<ul id="toDoList"></ul>
</div>
</div>
</section>
</body>
<script src="JS/Script.js"></script>
</html>
This must have been frustrating. You used a capital V for value.
.Value is an invalid property. You're looking for .value
function addToList() {
var item = document.getElementById("candidate").value;
var text = document.createTextNode(item);
var li = document.createElement("li");
li.appendChild(text);
document.getElementById("toDoList").appendChild(li);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/style.css" />
<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>
<section>
<div class="container">
<div class="userToDoList">
<input id="candidate" class="userInput" type="text" placeholder="New List..." />
<button onclick="addToList()">Add</button>
</div>
<div class="addedLists">
<ul id="toDoList"></ul>
</div>
</div>
</section>
</body>
<script src="JS/Script.js"></script>
</html>
I have been trying to make a setting button which toggles my settings section On click, but no hope, if you can help me I would be thankful, Here is the HTML and JS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="apping.css">
</head>
<body>
<button id="toggler" style="font-size:24px">Settings <i class="fa fa-gear"></i></button>
<section>
<h2> Dark Mode!</h2>
<label class="switch">
<input id="slider" type="checkbox">
<span class="slider round"></span>
</label>
</section>
<script src="app.js"></script>
</body>
</html>
and here is the Javascript
let slider = document.getElementById('slider');
let section = document.getElementById('section');
let toggler = document.getElementById('toggler');
toggler.addEventListener('click',function(){
section.classList.toggle("opacity");
})
and this is the class i'm trying to toggle in css, is there something i'm missing?
.opacity {
opacity: 1;
}
Was it necessary?
let slider = document.getElementById('slider');
let section = document.getElementById('section');
let toggler = document.getElementById('toggler');
toggler.addEventListener('click',function(){
section.classList.toggle("opacity");
})
#section {
opacity: 0;
}
.opacity {
opacity: 1!important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="apping.css">
</head>
<body>
<button id="toggler" style="font-size:24px">Settings <i class="fa fa-gear"></i></button>
<section id="section">
<h2> Dark Mode!</h2>
<label class="switch">
<input id="slider" type="checkbox">
<span class="slider round"></span>
</label>
</section>
<script src="app.js"></script>
</body>
</html>
You forgot to add id="section" to your section tag, and also you need to set the initial state of the section to opacity: 0.
let slider = document.getElementById('slider');
let section = document.getElementById('section');
let toggler = document.getElementById('toggler');
toggler.addEventListener('click',function(){
section.classList.toggle("opacity");
})
#section {
opacity: 0
}
#section.opacity {
opacity: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="apping.css">
</head>
<body>
<button id="toggler" style="font-size:24px">Settings <i class="fa fa-gear"></i></button>
<section id="section">
<h2> Dark Mode!</h2>
<label class="switch">
<input id="slider" type="checkbox">
<span class="slider round"></span>
</label>
</section>
<script src="app.js"></script>
</body>
</html>