JavaScript - document.write not working - javascript

I am trying to print an h3 that has an id of question, but it won't work.
function questions() {
var question = document.getElementById("question");
document.write(question);
}
questions();
body {
font-family: Arial;
}
.header {
padding-top: 50px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<h1>Edu Game 1</h1>
<h3>What is<h3 id="question">1+1?</h3></h3>
<input type = "text" id="ansBox" />
</div>
<script src="scripts.js"></script>
</body>
</html>
As you can see, the result is fine until it reaches the JavaScript. How can I fix this? I know document.write isn't the best thing to use to print stuff, but I am just testing something.

document.getElementById("question") returns a DOM object (as you saw) and you want to access the HTML within it, so use the innerHTML property to get it with document.getElementById("question").innerHTML. So technically there's nothing wrong with document.write; it's doing its job. You're just not selecting the content of the element.
function questions() {
var question = document.getElementById("question").innerHTML;
document.write(question);
}
questions();
body {
font-family: Arial;
}
.header {
padding-top: 50px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<h1>Edu Game 1</h1>
<h3>What is<h3 id="question">1+1?</h3></h3>
<input type = "text" id="ansBox" />
</div>
<script src="scripts.js"></script>
</body>
</html>

question is an object of type HTMLHeadingElement. You are writing the string representation of that object, which is [object HTMLHeadingElement].
You are either interested in the raw HTML used to generate that element (question.outerHTML) or its contents (question.innerHTML).

Try waiting for dom content to load by placing your script in here:
document.addEventListener("DOMContentLoaded", function() {
// code...
});
Set question with innerHTML
var question = document.getElementById("question").innerHTML;
Also, dont nest the tags, use a span instead:
<h3>What is<span id="question">1+1?</span></h3>

You are trying to write an HTMLheading object into the page.
Use the .outerHTML property for this to work.
function questions() {
var question = document.getElementById("question").outerHTML;
document.write(question);
}
questions();
body {
font-family: Arial;
}
.header {
padding-top: 50px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<h1>Edu Game 1</h1>
<h3>What is<h3 id="question">1+1?</h3></h3>
<input type = "text" id="ansBox" />
</div>
<script src="scripts.js"></script>
</body>
</html>

Related

Window.showDirectoryPicker() not working in Google Chrome 107

I've read about Window.showDirectoryPicker() here and it should be supported by Google Chrome 107, so I don't understand why I'm not seeing a window popup to select a directory!
const butDir = document.getElementById('butDirectory');
butDir.addEventListener('click', async () => {
const dirHandle = await window.showDirectoryPicker();
for await (const entry of dirHandle.values()) {
console.log(entry.kind, entry.name);
}
});
body {
background: #6e28d9;
padding: 0 24px;
margin: 0;
height: 100vh;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="src/style.css">
</head>
<body>
<h1>Hi friend, try edit me!</h1>
<p>Just some text</p>
<input type="button" id="butDirectory" value="Open Directory">
</body>
<script src="src/script.js"></script>
</html>
Sorry! It's actually working, but it needs to be opened in its own tab entirely, i.e. not in JSFiddle!

how to get exact content height inside the div using javascript?

I am trying to get exact content height inside the div .I am able to get exact value when there is no image inside the container . but if there is an image inside it give wrong result why ?
I am using clientHeight and offsetHeight both gives wrong output.
here is my code
https://codesandbox.io/s/cold-browser-dxj51?file=/index.html:907-919
<!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>
<style>
* {
padding: 0;
margin: 0;
}
.container {
padding: 20px;
width: 200px;
background-color: #eeeeee;
}
.logo img {
width: 100%;
}
.logo {
padding-bottom: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="logo">
<img src="1.png" />
</div>
<div class="abc">
This is a static template, there is no bundler or bundling involved!
</div>
</div>
<script>
console.log(document.querySelector(".container").clientHeight);
console.log(document.querySelector(".container").offsetHeight);
</script>
</body>
</html>
Expected output : 154px+ 20px+20px =(194px)
myoutput : 142px
The problem is that your javascript is not waiting the image's full load before checking its height. You can use the event listener "load" to succesfully fire the script you want, once dependent resources have finished loading:
window.addEventListener("load", event => {
console.log(document.querySelector(".container").clientHeight);
console.log(document.querySelector(".container").offsetHeight);
});
The code above will give you your desired output.

Print or Export Cesium Map Loading Division

It prints with this code but, the code is actually unable to get contents of the div where the map actually loads. I'm using toDataURL() in order to fulfill the need.
My HTML is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<script src="https://cesiumjs.org/releases/1.54/Build/Cesium/Cesium.js"></script>
<link href="https://cesiumjs.org/releases/1.54/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<script href="script.js" type="text/javascript"></script>
</head>
<body>
<div id="cesiumContainer">
</div>
<button id="printVoucher" onclick="print();">Print</button>
<script>
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwYTAwMTYzZi1kOGFjLTQyMDQtYjI0Ny03MWQ5ZTM1OGE2NjYiLCJpZCI6Nzc4Niwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU1MDQ3NDQ4OX0.LRLrZO7tSId3sR7xYPOxkS1ODfaQuyQygD9mwWQ1TGQ';
var viewer = new Cesium.Viewer('cesiumContainer');
</script>
</body>
</html>
My CSS is as follows:
body
{
background-color: wheat;
}
canvas
{
border:1px solid red;
width: 100%;
height: 100px;
}
#cesiumContainer
{
width: 100%;
height: 500px;
}
My JavaScript is as follows:
$(function()
{
var viewer = document.getElementById("cesiumContainer");
function print_voucher()
{
var win = window.open();
win.document.write("<br><img src='"+viewer.toDataURL()+"'/>");
win.print();
win.location.reload();
}
$("#printVoucher").click(function(){ print_voucher(); });
});
See the Output what I get with this above code.
Click here to visit the GitHub Project Link.
The problem was because by the time you're taking the screenshot, the WebGL drawing buffer has already been swapped out. This happens for performance reasons, you can read more about it here:
https://stackoverflow.com/a/32641456/1278023
The issue has been fixed by changing some lines of codes as follows:
var viewer = new Cesium.Viewer('cesiumContainer', {
contextOptions: {
webgl: {
preserveDrawingBuffer: true
}
}
});
Here is the full set of HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<script src="https://cesiumjs.org/releases/1.54/Build/Cesium/Cesium.js"></script>
<link href="https://cesiumjs.org/releases/1.54/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<script href="script.js" type="text/javascript"></script>
</head>
<body>
<div id="cesiumContainer">
</div>
<button id="printVoucher" onclick="print();">Print</button>
<script>
Cesium.Ion.defaultAccessToken = 'XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX XXXXXXXXXXXX';
var viewer = new Cesium.Viewer('cesiumContainer', {
contextOptions: {
webgl: {
preserveDrawingBuffer: true
}
}
});
</script>
</body>
</html>
Find the updated GitHub project Link

Line numbers misaligned using Prism code highlighter

I'm using the prism library to highlight some HTML, CSS and JavaScript code. It does an amazing job for the most part, except when it comes to line numbers.
They look like:
As you can see, they are misaligned.
How can I fix this?
My current code looks like:
<div id="html-display" class="display code-display">
<button class="explain-code">Explain this code</button>
<span class="current-code"><pre class="line-numbers"><code class="language-markup">
<!DOCTYPE html>
<html>
<head>
<title>a</title>
<meta charset="UTF-8">
<meta name="author" content="A A">
<link rel="stylesheet" type="text/css" href="design.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Test</h1>
</body>
</html></code></pre></span>
</div>
i had the same issue. Fixed it by modifying .line-numbers-rows > span selector.
.line-numbers-rows > span {
display: block;
counter-increment: linenumber;
line-height: 1.2rem; // add this
}

vim, right way to indent css and js inside html

Couldn't find proper solution in old questions, so
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style type="text/css">
body, input{
background-color:red;
}
</style>
<script>
function test() {
return false
}
</script>
</head>
<body>
<div></div>
</body>
</html>
everything except code inside <style> and <script> tags indented ok, how can I fix it?
As it turns out: That this has been done on purpose! Even my current Vim 8.1 installation contains an indent/html.vim-file which has such zero-indentation as its default setting.
That is however configurable via vimrc with:
let g:html_indent_script1 = "inc"
let g:html_indent_style1 = "inc"
...and -shame on us- is also mentioned in :help html-indent
I use othree/html5.vim plugin which supports css/javascript inside html. It works although this isn't probably the simplest solution.
Your code is indented like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<style type="text/css">
body, input{
background-color:red;
}
</style>
<script>
function test() {
return false
}
</script>
</head>
<body>
<div></div>
</body>
</html>

Categories