Function does not remove and add class - javascript

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>

Related

How do I put a link with link text in the copy buffer?

This text is a link. How do I put this into the copy buffer (e.g. via navigator.clipboard.writeText()) so that when the user pastes it somewhere else it retains the link text as well as the link itself?
Thanks in advance!
When u use addEventListener, you can extract all information from the event.
<!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>Test page</title>
</head>
<body>
<a class="link" href="https://stackoverflow.com/">Stackoverflow</a>
<script>
const linkComponent = document.querySelector('.link');
linkComponent.addEventListener('click', (event) => {
event.preventDefault(); // This will prevent the default action (going to link)
navigator.clipboard.writeText(`${event.target.innerHTML} - ${event.path[0].href}`);
});
</script>
</body>
</html>
I use ClipboardJs, it work for gmail or other email clients
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
</head>
<body>
<div id="container">
test link
</div>
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#container">Click me</button>
<script>
let clipboard = new ClipboardJS(".btn", {})
.on("success", function () {
console.log('success')
})
.on("error", function () {
console.log('error')
});
</script>
</body>
</html>

how to access parent document from html object in 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

Javascript ReferenceError: Observable is not defined when added Rx.js in src

I am trying to get observables to work on my html but I keep getting this error:
ReferenceError: Observable is not defined
I am using Firefox version: 62.0
Here is the code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.0/Rx.js"></script>
<script>
const numberObservable = new Observable((observer) => {
observer.next(5);
observer.next(10);
});
numberObservable.subscribe(value => console.log(value));
</script>
<title></title>
</head>
<body>
</body>
</html>
How can I get this to work?
You just need to use Rx.Observable instead of simply Observable.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.0/Rx.js"></script>
<script>
const numberObservable = new Rx.Observable((observer) => {
observer.next(5);
observer.next(10);
});
numberObservable.subscribe(value => console.log(value));
</script>
<title></title>
</head>
<body>
</body>
</html>
It should be new Rx.Observable notice the namespace.

Can someone point out my syntax error?

I believe that I have a syntax error somewhere in my script, could someone point it out?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Challenge: Daisy chain</title>
</head>
<body>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script>
for (i=0;i<12;i++)
{
$('<img>')
.attr('src', 'https://upload.wikimedia.org/wikipedia/commons/2/29/English_Daisy_(Bellis_Perennis).jpg')
.attr('width','100')
.attr('alt', 'Daisy chain')
.appendTo(document.body);
}
</script>
</body>
</html>
Not sure what syntac error you are seeing at your side.. But I would have made some changes
Move the script inside head
add the code inside a function that will be called on page load
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Challenge: Daisy chain</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
<script>
$(function() {
for (i=0;i<12;i++)
{
$('<img>')
.attr('src', 'https://upload.wikimedia.org/wikipedia/commons/2/29/English_Daisy_(Bellis_Perennis).jpg')
.attr('width','100')
.attr('alt', 'Daisy chain')
.appendTo(document.body);
}
});
</script>
</head>
<body>
</body>
</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