I need help with my javascript

Code Help HTML/CSS/JS
1

Question:
How can I apply color to any text in my javascript
Repl link:
https://replit.com/@jasoosgaming2/jS?s=app

code snippet
2

Hi @jasoosgaming2, please be more specific to what exactly your problem is.
I looked at your repl, and if mean you want to make the JavaScript change the colour, then you will have to update the existing <script language="text","javascript"> with:

<script type="text/javascript">

Then your code should change the color!

1 Like
3

I don’t think you need the type, since it’s in a script tag.

2 Likes
4

or simply just omit the type attribute entirely. (as firepup said)

2 Likes
5

I think this is what you want to do.

<html>
<head>
</head>
  
<body>

  <div id="display"></div>

  <script>
    let display = document.getElementById("display");
    display.style.color = "red";
    display.innerHTML = "DNV";
  </script>
  
</body>

</html>
3 Likes
6

Can be made easier:

<body>
    <p style="color: red">Some text</p>
</body>
3 Likes
7

I think OP wants to dynamically change the colour with JS.

1 Like
8

This way you can dynamically change the color too:

<body>
  <p style="color: red" id="text">Some text</p>

  <script>
    document.querySelector("#text").style.color = "blue"
  </script>
</body>

You can also use CSS:

<style>
  p{
    color: red;
  }
  
  p:hover{
    color: blue;
  }
</style>

<body>
  <p>Hover your mouse over this text to change its color!</p>
</body>
1 Like
9

@jasoosgaming2 I saw your project:

<html>
  <head>

  </head>
  
  <body bgcolor="PowderBlue">
    <p id="p2"> Good</p> 
    <p id="p3"> Boy</p>
 <script>
document.getElementById("p2").style.color="Red";  document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";  document.getElementById("p3").style.color="Red";  document.getaElementById("p3").stylel.fontFamily = "Arial";
document.getElementById("p3").styel.fontSize = "small";
    </script>   
  </body>
</html>

It’s better to change script tag into style tag:

<html>
  <head>
    <style>
      body {
        background-color: powderblue;  /* Idk if there is such a color or not. */
      }

      #p2 {
        color: red;
        font-family: arial;
        font-size: 20px;
      }
      
      #p3 {
        color: red;
        font-family: arial;
        font-size: 12px;
      }
    </style>
  </head>
  
  <body>
    <p id="p2"> Good</p> 
    <p id="p3"> Boy</p>
  </body>
</html>

I think you couldn’t change the color of the text because you wrote the color names in the wrong case. Write all color names in lower case. Hope I was of some help :slight_smile: