<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="homeWork.css">
<script src="./homeWork.js"></script>
<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='container'>
<div class='mango'> first div mango</div>
<div type='red' class='m2ango'>div red m2ango</div>
<div type='green' class='magngo'>div green magngo</div>
<li class='mango'>li mango
</div>
<div class='mango'>second div mango</div>
<li type='green' class='mango'>li green mango
</div>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
this is my HTML file and I want to get all of the attributes' values,
class: container
class: mango
type: red
class:m2ngo
type: green
class: magngo
class: mango
class:mango
......
you can do like this:
targetString:string | any = '<div class="AAAAA>A</div>'
const rExp : RegExp = /<([^> ]+)([^>]*)>/;
const matches = targetString.match(rExp)
console.log(matches[2]);
Related
index.html
You can See here myContent classnamed div is there inside which I want to add div of api data from index.js file.
<!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>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="myContent">
</div>
</div>
<script src="index.js"></script>
</body>
</html>
index.js
Here you can see I have used map function to map through each data of storeData array, but it is not working, DOM shows nothing
var storeData=[]
const getData=()=>{
axios.get("https://api.coingecko.com/api/v3/coins/markets?
vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false").then(
res=>{
storeData.push(res.data)
//console.log(storeData)
}
)
}
getData();
const myContent=document.querySelector(".myContent")
myContent.innerHTML=storeData.map((elem)=> {
return`
<div class='card'>
<div class="card-content">
<h3>${elem.name}</h3>
<h3>${elem.symbol}</h3>
<h3>${elem.current_price}</h3>
</div>
</div>
`
});
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>
I want to create a simple JS function where I click on a button, and the background changes into the color of that button. I have used an external JS file but even though I have used the function, it shows this error :'changecolor' is defined but never used.
here's the code:
<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">
<link rel="stylesheet" href="styles.css">
<title>JavaScript Background Color Switcher</title>
</head>
<body>
<div class="canvas">
<h1>Color Scheme Switcher</h1>
<span onclick="changecolor('grey')" class="button" id="grey"></span>
<span onclick="changecolor('white')" class="button" id="white"></span>
<span onclick="changecolor('blue')" class="button" id="blue"></span>
<span onclick="changecolor('yellow')" class="button" id="yellow"></span>
</div>
<script src="app.js"></script>
</body>
</html>
JS file:
function changecolor (id) {
document.body.style.background = document.getElementById(id).innerHTML
}
<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">
<link rel="stylesheet" href="styles.css">
<title>JavaScript Background Color Switcher</title>
</head>
<body>
<div class="canvas">
<h1>Color Scheme Switcher</h1>
<span onclick="changecolor('grey')" class="button" id="grey"></span>
<span onclick="changecolor('white')" class="button" id="white"></span>
<span onclick="changecolor('blue')" class="button" id="blue"></span>
<span onclick="changecolor('yellow')" class="button" id="yellow"></span>
</div>
<script src="app.js"></script>
</body>
</html>
JS file:
function changecolor (id) {
document.body.style.background = id;
}
now tell me if it works or not :)
Move script tag into the head section. Or at least put function declaration before its usage (move script tag to the very top of body).
Be sure to use a script tag at the end of the body where you are including the JS file. And to consume the functions of the JS file you should use them bellow the include of the file. This is the recommended approach.
Your tag's greater than mark is in the wrong place.
Move it right after and
<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">
<link rel="stylesheet" href="styles.css">
<title>JavaScript Background Color Switcher</title>
</head>
<body>
<div class="canvas">
<h1>Color Scheme Switcher</h1>
<div id="switch"><!--dont delete this div its here to avoid js to select all elements with class button -->
<span class="button" id="grey"></span>
<span class="button" id="white"></span>
<span class="button" id="blue"></span>
<span class="button" id="yellow"></span>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
JS file:
function changecolor(id) {
document.body.style.background = id;
}
var rootElem = document.querySelector("#switch");
var buttonArr = rootElem.querySelectorAll(".button");
for (let i = 0; i < buttonArr.length; i++){
buttonArr[i].addEventListener('click', function(){
changecolor(buttonArr[i].id);
}
}
Just drop the name or hex of the color in the id of the button and add as many as you want
Warning Dont remove div with id switch and dont alter the class of the
buttons used for the switching color
I get the whole HTML code from JSON using Ajax , The fetched string looks like :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
..
</head>
<body>
<div class="container">
...
</div>
<div id="overlay"></div>
<script></script>
..
</body>
</html>
I want to get the whole code from the div with class container <div class="container"> to this one <div id="overlay"></div>.
How to accomplish that so that I just get the html part I want from the <body> not the whole string?
<script>
(function(window, document){
// `res` is the ajax response string
const res = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
stuff from container.
</div>
<div id="overlay"></div>
</body>
</html>`;
const wrapper = document.createElement("div");
wrapper.innerHTML = res;
let str = '';
str+=wrapper.querySelector("div.container").outerHTML;
str+=wrapper.querySelector("div#overlay").outerHTML;
alert(str);
})(window, document);
</script>