how to access parent document from html object in javascript? - javascript

this is about HTML <object> element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>parent</title>
<style>
#square { width:20px; height:20px; background-color: aqua;}
</style>
</head>
<body>
<div id="square"></div>
<object data="child.html" type="text/html" ></object>
</body>
</html>
and child.html is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<button>red</button>
<button>blue</button>
<script>
document.querySelectorAll('button').forEach(bt=>{
bt.onclick=e=>{
console.log(e.target.textContent)
document.parentNode.getElementById('square').style.background = e.target.textContent
}
})
</script>
</body>
</html>
but I got this error :
TypeError: document.parentNode is null
so how to access to #square element from child.html in JS ?

Try this -
parent.document.getElementById('square').style.background = e.target.textContent

Related

Function does not remove and add class

I have a script that basically is to remove the class "no-js" from the body and add the class "js", but the script is not working. What did I do wrong?
<!doctype html>
<html lang="pt-br">
<head>
<title> Infusion </title>
</head>
<body class="no-js">
</body>
</html>
function removeClassBody(){
var body = document.querySelector('body');
body.classList.remove('no-js');
body.classList.add('js');
}
()removeClassBody;
You have to call the function like thie removeClassBody();
function removeClassBody(){
var body = document.querySelector('body');
body.classList.remove('no-js');
body.classList.add('js');
}
removeClassBody();
<!doctype html>
<html lang="pt-br">
<head>
<title> Infusion </title>
</head>
<body class="no-js">
</body>
</html>

CSS way to change the content of an element on classList.toggle

Is there a CSS way to change the content of an element on classList.toggle ?
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#so.collapsed
{
content: "SO";
border:1px solid red;
}
</style>
</head>
<body>
<div id="so">StackOverflow</div>
<button id="btn">Click Me</button>
<script>
const btn = document.getElementById("btn");
btn.addEventListener("click", () =>
{
document.getElementById('so').classList.toggle("collapsed");
});
</script>
</body>
</html>
One solution is :
#so:before
{
content: "StackOverflow";
}
#so.collapsed:before
{
content: "SO";
border:1px solid red;
}
But I was hoping to have the content in the HTML.
CSS content can only be used with pseudo elements after or before.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#so.collapsed:before
{
content: "SO";
border:1px solid red;
}
#so.collapsed span {
display: none;
}
</style>
</head>
<body>
<div id="so"><span>StackOverflow</span></div>
<button id="btn">Click Me</button>
<script>
const btn = document.getElementById("btn");
btn.addEventListener("click", () =>
{
document.getElementById('so').classList.toggle("collapsed");
});
</script>
</body>
</html>

Implementation of TogetherJS is not working

I am trying to make a simple shareable text editor with Mozilla's TogetherJS, but it does not seem to work. Based on their instructions, I added the library/script in the head and calling the JS from the button.
https://togetherjs.com/
In the Head tag:
<script src="https://togetherjs.com/togetherjs-min.js"></script>
In the body:
<button onclick="TogetherJS(this); return false;">Start TogetherJS</button>
Full code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test JS</title>
</head>
<body>
<button onclick="TogetherJS(this); return false;">Start TogetherJS</button>
<div>
<textarea style="border:1px solid red; height:300px; width: 500px; font-size: 16px;">
</textarea>
</div>
<script src="https://togetherjs.com/togetherjs-min.js"></script>
</body>
</html>
It seems to super-simple, yet for some reason, it does not seem to work!
Could you please check now wrap your script in the body i.e.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test JS</title>
</head>
<body>
<button onclick="TogetherJS(this); return false;">Start TogetherJS</button>
<script src="https://togetherjs.com/togetherjs-min.js"></script>
</body>
</html>

<div></p> causes layout problems

I am trying to translate <p></p> content with this method I found online:
<html>
<head>
<title>My Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body class="translate">
<div>Тестирование</p>
<div class="translate_control" lang="en"></div>
<script>
function googleSectionalElementInit() {
new google.translate.SectionalElement({
sectionalNodeClassName: 'translate',
controlNodeClassName: 'translate_control',
background: '#f4fa58'
}, 'google_sectional_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=en"></script>
</body>
</html>
Fiddle
As you can see for this to work the translatable text is enclsoed in <div></p> which I have never encountered before and it messes up the layout which doesn't happen with just <p></p> or <div></div>
Can somebody explain what is going on and is there a fix to this?
Try this way, <div></p> is simply wrong:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body class="translate">
<p>Тестирование</p>
<div class="translate_control" lang="en"></div>
</body>
<script>
function googleSectionalElementInit() {
new google.translate.SectionalElement({
sectionalNodeClassName: 'translate',
controlNodeClassName: 'translate_control',
background: '#f4fa58'
}, 'google_sectional_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=en"></script>
</html>

Javascript generated HTML not working

The console doesn't give any error, and the window displays nothing. What is wrong with it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<script type="text/javascript">
function stuffify(){
for(var a=6;a<=0;a--){
document.getElementById("stuff").innerHTML+="<h"+a+">stuff</h"+a+"></br>";
}
}
</script>
</head>
<body>
<div id="stuff" onload="stuffify()"></div>
</body>
</html>
The onload function will work when on the body tag of your document.
Also, the condition of your for loop is incorrect, it should be:
for(var a=6; a >= 0; a--)
try this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Home</title>
<script type="text/javascript">
function stuffify(){
for(var a=6;a<=0;a--){
document.getElementById("stuff").innerHTML+="<h"+a+">stuff</h"+a+"></br>";
}
}
</script>
</head>
<body onload="stuffify();">
<div id="stuff" ></div>
</body>
</html>
onload is supported by following tags:
<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
This explains why stuffify is not triggered after your div is loaded.
So, you can bind the onload function to body instead of div, or insert script after div, like this:
<div id="stuff" ></div>
<script type="text/javascript">
stuffify();
</script>

Categories