How to connect html to js onto codepen?
Like with html u use the
h1 our #div to connect the ones with css
like example
HTML
<h1> hello text </h1>
CSS
h1 {
font-type: arial;
}
the font type now will be in arial.
but how to do with js?
but how to do with js? how does it work and what do u do?
I believe with Code Pen it is automatically connected. But in an application not on Code Pen you would either write inline JS using the script tags or use the script tag to point to the JS file.
<script src='yourJSFile.js'></script>
<!-- OR -->
<script>
//Some JS here
const yourVariable = document.querySelector('h1'); //Not the best way to do this
yourVariable.style.fontFamily = 'arial';
</script>
its already connected so the script tag becomes completly unecearry
this is not really relevant at all. thanks for the trying to :3 but i need something that is actually usefull
That is what I stated at the beginning of my reply,
I believe with Code Pen it is automatically connected.
I gave you examples of how to do it in a real application outside of Code Pen.
You asked:
but how to do with js?
and I showed you how to do it with JavaScript.
my question was how to connect an element with js
The only thing you told me was how to connect a js to a html file which was completly irrelevant
then you state: Not the best way to do this. Why it is not a good option it doesn’t say, any better option it doesn’t give. So what’s the point then. If it’s only a halfbacked answere
sorry if it sound rude. i know you want to help and have good intentions. 
my question was how to connect an element with js
This is how you connect your elements from the DOM (Document Object Model) to your JS.
const yourVariable = document.querySelector('h1');
So I did show you how to do that. I put it wasn’t the best way to do it because you were referencing styling in your question. Something like this would be done in CSS. If you really wanted it done in JS I would add a class to it and get the class from the DOM rather than the element in the HTML.
This is how you can add styles from your JS to an element from your HTML.
yourVariable.style.fontFamily = 'arial';
which I also showed you how to do in my original post.
if you know DOM (document object model) JS, then you can code in the JS editor on the bottom of the others.
If you want to do all of the stuff in the HTML editor, then you can wrap your code in <script> tags.
If you are using a library like react, for instance, then use two script tags:
<script src = "[library link]"></script> <!--no code in the first set of script tags-->
<script>
//add your JS!!
</script>
yes but only with the h1 element. what about when i use a p one our a div/something else
do i need to type out the entire:
const yourVariable = document.querySelector('h1')
each time?
also it wasn’t about styling but placing the js at a specific place into my document using the html/css to guide it to it since they never seem to talk about placing and givng the js a specific coordinate to a page. and i simpley want to connect for example a time and date to it when i want it onto a specific place?
the dom just referse to document object model which seems more of a styling guide how to place stuff how is it ussefully excatfully?
i am asking how to do without the script tags connect them to one another wiithhout them being in the same editor.
you don’t understand what i am asking at all.
no css in html no js into html
thats to messy and confusing
no script tags involved because codepen makes them uneceary
each one into its own designated area
lastly i checked the dom guide
but it doesn’t seem to say how to position and style things otherwise then to change a color: https://www.w3schools.com/js/js_htmldom_css.asp
this is more introductory and explain more of that:
https://www.w3schools.com/js/js_htmldom.asp (and in order the following pages from here)
the short explanation is that you need to select an html element before you can do any changes to it, in the same way you need to select an html element to apply css style to it
Check your Twitter Il Mago
this is the wrong post?
Okay so I tried to connect HTML with JS
Following the guide onto w3schools
Bellow is all the things i tried so far
and so far none of them seem to work
<head>
</head>
<body>
<h2>JavaScript in Head</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
</script>
</body>
<button id="button"></button>
<script>
document.getElementById("demo").innerHTML
= "Hello";
</script>
<p id="demo"></p>
var myElement = document.getElementById("button");
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
<script>
</script>
you should not put <script> tags in the JS part, as everything in there is already automatically put in a script tag. remove the script tags, and you will not have the lines there appearing as text in the Result tab. after that you will see what’s working and not working
don’t add HTML in the JS part, that also gives errors and stop things from working
this line works:
document.getElementById("demo").innerHTML
= "Hello";
just let it be the only line in the JS part… it is not working because of the rest in there that cause issues, syntax errors and such
So how come that only
document.getElementById("button").innerHTML
works? is it because it needs to includes the innerHTML tag?
when i look at the example which they did with a paragraph
it connects but when i change it to a button element like bellow
and give it the id which should connect to the id of the button id in html it fail
why is that?
<button id="button"></button>
var myElement = document.getElementById("button");
<button type="button" onclick="myFunction()">Try it</button>
html has to be added in the html box, you can’t put it in the js box
so this is what you need to do:
the things in red are those you need to remove because they break things in the JS box
- <button id="button"></button>
document.getElementById("button").innerHTML
= "Hello";
- <p id="demo"></p>
var myElement = document.getElementById("button");
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
- <script>
- </script>
Hey @KittyKora I made a fork of your pen here:
https://codepen.io/drding/pen/pooNRRm
If you’re working IN codepen, you don’t have to worry about adding script tags anywhere. You can simply just put your JS over in the appropriate window. Secondly you’re basically trying to target the button two different ways at the same time, which isn’t going to work. I’ve cleaned up your code in my fork and added some comments to hopefully clear some things up.
I’ve also added a second way of targeting and manipulating the DOM (see my second example in the codepen) using .textContent rather than .innerHTML. For the purposes of what you’re trying to do, it’s a better way to go about it. Usually you should only use innerHTML if you’re going to be changing the actual code of an element or adding code to it. Just be aware it could be liable for code injection depending on what you’re doing with it.
Meanwhile for something as simple as changing the “text” of an element, .textContent is better.
Check this out for more information on it: https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
Thank you so much I saved it up <3