i want to open several tabs when someone clicks this button.but my current code just opens the first.by the way this is a repost since the previous 1 had a lot of typos that i corrected
<!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 id="hi" type="submit" onclick="redirect()">button</button>
</body>
</html>
<script>
function redirect(){
var window1 = 'https://google.com';
window.open(window1, '_blank');
var window2 = "https://www.youtube.com/watch?v=dQw4w9WgXcQ"
window.open(window2, '_blank');
var window3 = "https://www.youtube.com/shorts/AlvXHz2pUL4"
window.open(window3, '_blank');
var window4 = "https://www.youtube.com/watch?v=J2GVKuYoIww"
window.open(window4, '_blank');
var window5 = "https://www.youtube.com/watch?v=1Z6CHioIn3s&list=RDMMYrJqDCaeSZg&index=20"
window.open(window5, '_blank');
var window6 = "https://www.youtube.com/watch?v=KbNL9ZyB49c&list=RDKbNL9ZyB49c&start_radio=1&rv=KbNL9ZyB49c&t=32&t=32"
window.open(window6, '_blank');
var window7 = "https://www.youtube.com/watch?v=fB8TyLTD7EE&list=RDKbNL9ZyB49c&index=3"
window.open(window7, '_blank');
var window8 = "https://www.youtube.com/watch?v=Zasx9hjo4WY&list=RDKbNL9ZyB49c&index=8"
window.open(window8, '_blank');
var window9 = "https://www.youtube.com/watch?v=r6zIGXun57U&list=RDKbNL9ZyB49c&index=7"
window.open(window9, '_blank');
var window10 = "https://www.youtube.com/watch?v=v7HAVTyvLqI&list=RDKbNL9ZyB49c&index=8"
window.open(window10,'_blank');
}
</script>
Related
I would like create one div on body, any time i send a request post to my localhost. But he return all time "document is not defined", someone can help me?
app.post('/tshirt/:id', (req, res) => {
url.push(req.body.Musica);
User.push(req.body.User);
for (let index = 0; index < url.length; ++index) {
let elemento = document.createElement("div");
let padre = document.body("sendMusics");
let referencia = document.getElementById("dsmuix")[index];
elemento.innerHTML='<div id="dsmuix" style="background-color:blue; width:97%; height: 75px;margin-top: 1px;margin-left: 2%;width: 50%;height: 100%;float: left;" ><label style="margin-top:15px;display:inline-block;margin-left: 5%;">'+url[index]+'(time)<br><br> '+User[index]+'</label></div>';
padre.insertBefore(elemento, referencia);
}});
Can help me? Thanks
Use something like this
const createElement = () =>{
const newDiv = document.createElement("div");
newDiv.innerHTML = 'it works'
document.body.appendChild(newDiv)
}
document.body.onload = createElement
<!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>
</body>
</html>
The thing i wanna do is when user writes something to input and sumbits it, the page will change to the input.
Example:
If user writes "Web" to the input, the page title should change to "Web"
Here's the code:
JS:
document.getElementById("titleSumbitBtn").onclick = function (){
var newTitle = document.getElementById("newTitle").textContent;
document.getElementById("title").innerHTML = newTitle;
}
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 id="title">Web Editor</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<center><label id="originLabel">Welcome to Web Editor!</label><br></center>
<br><label id="changeTitleLabel">Change the title of Web: </label><br>
<input type="text" id="newTitle"><br>
<button type="button" id="titleSumbitBtn">Change</button>
</body>
</html>
You can assign new title to the document like this:
document.getElementById("titleSumbitBtn").onclick = function (){
var newTitle = document.getElementById("newTitle").value;
document.title = newTitle;
}
This is actual implementation but keep in mind that it must run after the DOM element with id newTitle.
If you put your <script> tag inside <head>, you'll need DOMContentLoaded:
document.addEventListener('DOMContentLoaded', () => {
document.getElementById("titleSumbitBtn").onclick = function (){
var newTitle = document.getElementById("newTitle").value;
document.title = newTitle;
}
})
try this:
document.getElementById("titleSumbitBtn").addEventListener("click", function (){
var newTitle = document.getElementById("newTitle").value;
document.getElementById("title").innerText = newTitle;
})
Here is my 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">
<title>2-d0</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>2-D0</h2>
<div id="heading">
<textarea id="text"></textarea>
<button id="button">Add</button>
</div>
<div id="lists">
</div>
<script src="functions.js"></script>
</body>
</html>
Here is my Javascript code
'use strict'
const buttonclick = document.getElementById('button')
const list = document.getElementById('lists')
const a = "<span><button class = 'rbutton'>X</button></span>" //list-item button
const clickhandler = () => {
const text = document.getElementById('text')
//creating a list element
if(text.value != ''){
let Newdiv = document.createElement('div')
// appending elements
Newdiv.innerHTML = text.value + a
list.appendChild(Newdiv)
let b = document.getElementsByClassName('rbutton')
if(b !=[]){
for(let i = 0; i < b.length; i++){
b[i].addEventListener('click', function(){
b[i].parentElement.parentElement.remove();
console.log(b)
})
}
}
//reseting the textarea value
text.value = ''
}
}
buttonclick.addEventListener('click', clickhandler)
An error in shown on delete a item: Cannot read property 'parentElement' of undefined at HTMLButtonElement. .
Can someone please explain what is wrong in my code and what does the error mean.
thankyou
On every click of the button you are attaching event handlers to the whole group again.
On the first iteration, 1st button has one delete handler.
On second iteration, 1st button has 2 event handler(one for buttons[0] and one for buttons[1]), and 2nd has one.
So on.
Use this. It will always point to the element to the event on which the event handler is attached:
this.parentElement.parentElement.remove();
Another way is to simply use this.parentElement.parentElement.remove()
<!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>2-d0</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>2-D0</h2>
<div id="heading">
<textarea id="text"></textarea>
<button id="button">Add</button>
</div>
<div id="lists">
</div>
<script>
"use strict";
const buttonclick = document.getElementById('button');
const list = document.getElementById('lists');
const a = "<span><button class = 'rbutton'>X</button></span>"; //list-item button
const clickhandler = () => {
const text = document.getElementById('text');
//creating a list element
if(text.value != '') {
let Newdiv = document.createElement('div');
// appending elements
Newdiv.innerHTML = text.value + a;
list.appendChild(Newdiv);
let b = document.getElementsByClassName('rbutton');
for(let i = 0; i < b.length; i++) {
b[i].addEventListener('click', function() {
this.parentElement.parentElement.remove();
});
}
//reseting the textarea value
text.value = '';
}
}
buttonclick.addEventListener('click', clickhandler);
</script>
</body>
</html>
You should use window.event.target.parentElement... to get the button instead of b[i].parentElement....
"use strict";
const buttonclick = document.getElementById('button');
const list = document.getElementById('lists');
const a = "<span><button class = 'rbutton'>X</button></span>"; //list-item button
const clickhandler = () => {
const text = document.getElementById('text');
//creating a list element
if(text.value != '') {
let Newdiv = document.createElement('div');
// appending elements
Newdiv.innerHTML = text.value + a;
list.appendChild(Newdiv);
let b = document.getElementsByClassName('rbutton');
for(let i = 0; i < b.length; i++) {
b[i].addEventListener('click', function() {
window.event.target.parentElement.parentElement.remove();
});
}
//reseting the textarea value
text.value = '';
}
}
buttonclick.addEventListener('click', clickhandler);
<!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>2-d0</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>2-D0</h2>
<div id="heading">
<textarea id="text"></textarea>
<button id="button">Add</button>
</div>
<div id="lists">
</div>
</body>
</html>
I'm not able to go through all children of an SVG file in JavaScript. I want to go through all the paths and perform a function on them(changing them to polygons).
I've tried creating an array of paths using querySelectorAll("path");, but it didn't work. Now I'm trying to sift through all the elements in the SVG file, converting paths as I go.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Reader</title>
</head>
<body>
<input type="file" id="fileReader" />
<br>
<p id="Content"></p>
<script>
document.getElementById("fileReader").addEventListener('change',function(){
var fr = new FileReader();
fr.onload = function(){
console.log("File Loaded!")
}
parser = new DOMParser();
var doc = parser.parseFromString(fr.readAsText(this.files[0]), "text/xml");
console.log(doc);
var path = "path";
doc.querySelectorAll('*').forEach(function(){
if($(this).is(path)){
var polygon = doc.createElementNS("http://www.w3.org/2000/svg", "polygon");
polygon.setAttribute("id", $(this).getAttribute("id"));
console.log("Converting " + $(this).getAttribute("id"));
var len = $(this).getTotalLength();
var p = $(this).getPointAtLength(0);
var seg = $(this).getPathSegAtLength(0);
var stp=p.x+","+p.y;
for(var i=1; i<len; i++){
p=$(this).getPointAtLength(i);
if ($(this).getPathSegAtLength(i)>seg) {
stp=stp+" "+p.x+","+p.y;
seg = $(this).getPathSegAtLength(i);
}
}
polygon.setAttribute("points", stp);
$(this).replaceWith(polygon);
}
});
});
</script>
</body>
</html>
This gives me two errors:
XML Parsing Error: syntax error
Location: file:///C:/Users/Temp/Desktop/Experiment.html
Line Number 1, Column 1:.
ReferenceError: $ is not defined.
I've stopped trying to use doc.children() since it wasn't working.
Just add the jQuery library into your project.
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
CODE:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Reader</title>
</head>
<body>
<input type="file" id="fileReader" />
<br>
<p id="Content"></p>
<script>
document.getElementById("fileReader").addEventListener('change',function(){
var fr = new FileReader();
fr.onload = function(){
console.log("File Loaded!")
}
parser = new DOMParser();
var doc = parser.parseFromString(fr.readAsText(this.files[0]), "text/xml");
console.log(doc);
var path = "path";
doc.querySelectorAll('*').forEach(function(){
if($(this).is(path)){
var polygon = doc.createElementNS("http://www.w3.org/2000/svg", "polygon");
polygon.setAttribute("id", $(this).getAttribute("id"));
console.log("Converting " + $(this).getAttribute("id"));
var len = $(this).getTotalLength();
var p = $(this).getPointAtLength(0);
var seg = $(this).getPathSegAtLength(0);
var stp=p.x+","+p.y;
for(var i=1; i<len; i++){
p=$(this).getPointAtLength(i);
if ($(this).getPathSegAtLength(i)>seg) {
stp=stp+" "+p.x+","+p.y;
seg = $(this).getPathSegAtLength(i);
}
}
polygon.setAttribute("points", stp);
$(this).replaceWith(polygon);
}
});
});
</script>
</body>
</html>
Just noticed today that template literals with html tags don't work, or maybe I wrote it wrong?
I tried to include p tags in the template literals (which I commented out in the snippet), but it didn't work. Does anyone have any ideas? Thanks!
var blueBtn = document.getElementById('btn');
var aniBox = document.getElementById('animal-info');
blueBtn.addEventListener('click', function() {
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'https://learnwebcode.github.io/json-example/animals-1.json');
ourRequest.onload = function() {
var ourData = JSON.parse(ourRequest.responseText);
addHTML(ourData)
};
ourRequest.send();
});
function addHTML(data) {
var content = '';
for (let i of data) {
console.log(i);
content += '<p>' + i.name + ' is a ' + i.species + '.</p>';
//content += '`<p>${i.name} is a ${i.species}.</p>`'; <--this one doesn't work
}
aniBox.insertAdjacentHTML('beforeend', content);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JSON and AJAX</title>
</head>
<body>
<header>
<h1>JSON and AJAX</h1>
<button id="btn">Fetch Info for 3 New Animals</button>
</header>
<div id="animal-info"></div>
<script src="js/main.js"></script>
</body>
</html>
Templates are needed to be enclosed in backticks. You don't need to enclose template in quotes again.
You need to change this:
'`<p>${i.name} is a ${i.species}.</p>`'
to this:
`<p>${i.name} is a ${i.species}.</p>`
The former is just a plain JavaScript string, but the latter is the template literal syntax and it allows the sections in ${ ... } to be interpolated.
See the following working example:
var blueBtn = document.getElementById('btn');
var aniBox = document.getElementById('animal-info');
blueBtn.addEventListener('click', function() {
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', 'https://learnwebcode.github.io/json-example/animals-1.json');
ourRequest.onload = function() {
var ourData = JSON.parse(ourRequest.responseText);
addHTML(ourData)
};
ourRequest.send();
});
function addHTML(data) {
var content = '';
for (let i of data) {
console.log(i);
// content += '<p>' + i.name + ' is a ' + i.species + '.</p>';
content += `<p>${i.name} is a ${i.species}.</p>`;
}
aniBox.insertAdjacentHTML('beforeend', content);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JSON and AJAX</title>
</head>
<body>
<header>
<h1>JSON and AJAX</h1>
<button id="btn">Fetch Info for 3 New Animals</button>
</header>
<div id="animal-info"></div>
<script src="js/main.js"></script>
</body>
</html>
Read more about template literals in the documentation.