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>
Related
I tried using Local Storage to store a variable to determine if a button can be used or not. This however is not working at all like I expected. Why is the Item getting shown as "null" and why is the console.log not working?
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>index.html</title>
<script>
localStorage.setItem('status', 'unused')
console.log(localStorage.getItem('status'))
let usedButton = () => {
localStorage.setItem('status', 'used')
console.log(localStorage.getItem('status'))
window.location.replace('index2.html')
}
</script>
</head>
<body>
<button onclick="usedButton()">Use me</button>
</body>
</html>
index2.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>index2.html</title>
<script>
console.log(localStorage.getItem('status'))
let isButtonUsed = () => {
if(localStorage.getItem('status') == 'used'){
console.log('I was already used')
}
}
</script>
</head>
<body>
<button onclick="isButtonUsed()">Am I used?</button>
</body>
</html>
I tried making it so that the Button on index.html changes the localStorage variable status from 'unused' to 'used'. But on the 2nd page it is showing up as null and so the function is not working. I don't know how I can get a Button to work on one page and by clicking it disabling other buttons on other pages you redirect to.
Thank you in advance for your help.
document.querySelectorAll('button').forEach (function(button){
button.onclick=function(){
document.querySelector('#hello').Style.color=button.dataset.color;
}
});
<!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>
<h1 id="hello">Hello wprld</h1>
<button data-color="red">Red</button>
<button data-color="green">green</button>
<button data-color="blue">Blue</button>
</body>
</html>
//Trying to change the color of the tag when the user clicks it
//trying to implement this function but it showing the same error style cannot be null
It's case sensitive. Not "Style", it is "style".
When it says undefined, check if it exists
document.querySelectorAll('button').forEach (function(button){
button.onclick=function(){
document.querySelector('#hello').style.color=button.dataset.color;
}
});
<!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>
<h1 id="hello">Hello wprld</h1>
<button data-color="red">Red</button>
<button data-color="green">green</button>
<button data-color="blue">Blue</button>
</body>
</html>
I have an assignment where I have to change h1 to whatever is written in the input. I have to do this through making a function with getElementByID.
This is what I have so far
<!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>Change Text</title>
</head>
<body>
<h1 id="Header">Change header</h1>
<p>Use the input to change the header.</p>
<input type="text" oninput="changeh1(this.value)" />
<script>
function changeh1(newtext) {
document.getElementById("Header").textContent=
}
</script>
</body>
</html>
You passed the value (newtext) to your function but never used it:
<!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>Change Text</title>
</head>
<body>
<h1 id="Header">Change header</h1>
<p>Use the input to change the header.</p>
<input type="text" oninput="changeh1(this.value)" />
<script>
function changeh1(newtext) {
document.getElementById("Header").textContent=newtext;
}
</script>
</body>
</html>
Try changing your script to this:
function changeh1(newtext) {
document.getElementById("Header").innerText = newtext;
}
<script>
function changeh1(newtext) {
document.getElementById("Header").textContent = newtext;
}
</script>
The textContent API is useful to get and also set the text content of a node. In your original code, you did not set the content of the Node you were trying to modify (the header, h1). To fix it, just set it to the argument of the callback function you defined. In the DOM, you are passing this.value as the argument for newtext
<!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>Change Text</title>
</head>
<body>
<h1 id="Header">Change header</h1>
<p>Use the input to change the header.</p>
<input type="text" oninput="changeh1(this.value)" />
<script>
function changeh1(newtext) {
document.getElementById("Header").textContent = newtext
}
</script>
</body>
</html>
hi i am trying to convert my html code into an image
this i my python code:
def cnv2image():
options = {
"--enable-local-file-access": None,
"--enable-javascript": None,
"--javascript-delay": 10000,
"--debug-javascript": None
}
imgkit.from_file("tweet_embed.html", "result.pdf", options)
and this is my html code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
name="viewport">
<meta content="ie=edge" http-equiv="X-UA-Compatible">
<meta content="text/html; charset=utf-8" http-equiv="Content-type">
<meta content="jpg" name="imgkit-format">
<script async charset="utf-8" src="https://platform.twitter.com/widgets.js"></script>
<title>Document</title>
</head>
<body>
<blockquote class="twitter-tweet" data-theme="dark"><p dir="ltr" lang="en">be honest, do you kiss your dog goodnight?</p>— ᴘᴀᴠʟᴏᴠ ᴛʜᴇ ᴄᴏʀɢɪ 🐶 (#PAVGOD) August 18, 2021</blockquote>
</body>
</html>
the problem is that when i try to convet html to image js wont get load and i get a screenshot only from html
this is the result that i get:
this is what i expect:
i will create a Checkout system for gastro.
How i can wríte this.
I will create a list than write this on another page "home.php",
than i need a script were i can onclick writeout "deftige KartoffelSuppe" and the price.
i love you guys,
<script>
let Suppe =["Deftige Kartoffelsuppe, 4,80"];
</script>
<button id="btn0">Deftige Kartoffelsuppe</button>
<div id="Ausgabe"></div>
Greedings from Germany
Michael Burat
<!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>Static Template</title>
</head>
<body>
<button id="btn0">Deftige Kartoffelsuppe</button>
<div id="ausgabe"></div>
<script>
let suppe = ["Deftige Kartoffelsuppe, 4,80"];
const btn = document.querySelector("#btn0");
const ausgabe = document.querySelector("#ausgabe");
btn.addEventListener("click", () => {
ausgabe.innerHTML = suppe;
});
</script>
</body>
</html>
i changed the id names to lowercase and added a eventListener to handle the click.
innerHTML is what you wanted i guess.
And thanks for loving me btw.
and this is a clean version of coding something like this:
<!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>Static Template</title>
</head>
<body>
<button id="btn0">Deftige Kartoffelsuppe</button>
<div id="ausgabe"></div>
<script>
const data = [
{
name: "Deftige Kartoffelsuppe",
preis: "4,80€"
}
];
const btn = document.querySelector("#btn0");
const ausgabe = document.querySelector("#ausgabe");
btn.addEventListener("click", () => {
ausgabe.innerHTML = `${data[0].name} für nur ${data[0].preis}`;
});
</script>
</body>
</html>