How to connect JS with HTML?

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>

3 Likes

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.

1 Like

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. :frowning:

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.

1 Like

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

1 Like

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>

https://codepen.io/maria-hoek/pen/RwwooRW

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

1 Like

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

1 Like

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>


2 Likes

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

2 Likes

Thank you so much I saved it up <3

1 Like