0

HTML CODE:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Practice</title>
<script src="my.js"></script>
<link rel="stylesheet" href="my.css" />
</head>
<body>
<h1>Practice Page</h1>

<p>click on ^ to show am
<code class="js">alert()</code>.</p>

<p id="hoverable">Put your mouse here to make every paragraph red <code class="html">&lt;p&gt;</code> get the class
<code class="h">highlighted</code></p>

I have imported a jquery file already with another which isn't included here, and my current javascript code is as follows:

head = function() {
  alert("I'm a heading");
}

redtext=function(){
    $('hoverable').attr("#hoverable","#highlighted");

}
setup = function() {
  jQuery('h1').click(head);
  jQuery('p').mouseover(red);    

}
jQuery(document).ready(setup)

With my css code being:

.highlighted {
  color: red;
}

I'm trying to make it so when ever i highlight over the hoverable id, all the paragraphs turn red, so the new id would be highlighted for all the paragraphs, I tried changing the id, but i can't seem to get it to work

NinjaWarrrior
  • 57
  • 1
  • 8
  • `$('#hoverable').on('mouseenter', function() { $('body *').addClass('highlighted') })`. Please note that this is jQuery (which is a library written in and for Javascript, but it is not Javascript). – connexo Feb 24 '18 at 03:03
  • So would i put that into my colour function, and then call it from my setup? Or directly input that into my ready function – NinjaWarrrior Feb 24 '18 at 03:07
  • In your setup function. – connexo Feb 24 '18 at 03:16

1 Answers1

1

To select an element by ID, use '#', which is missing in your code.

Change following line from your color function- 

$('hoverable').attr("#hoverable","#highlighted");

to the following if highlighted is an ID - 

$('#hoverable').attr("id","highlighted");

If highlighted is a class, 

$('#hoverable').attr("class","highlighted");
ddm310
  • 145
  • 4
  • `highlighted` is a class in his code, not an id. – connexo Feb 24 '18 at 03:08
  • @Monicka Thanks so much! That made the hoverable change into highlighted, if i wanted to make the paragraphs change as well when we mouseover hoverable, would i do the same thing and add a p setting? or add a new function, cause I don't want it to be red when i hover over the "clicking this paragraph" but red when we hover the 2nd paragraph – NinjaWarrrior Feb 24 '18 at 03:15
  • 1
    @Monicka don't use `attr` to add a class as it will replace all existing classes on the element. Use `$(selector).addClass('classname')`. – connexo Feb 24 '18 at 03:18
  • color=function(){ $('#hoverable').attr("class","highlighted"); $('p').addClass('hoverable) or color=function(){ $('#hoverable').addClass('highlighted'); $('p').addClass('highlighted'); ? – NinjaWarrrior Feb 24 '18 at 03:20
  • Yes @connexo is right. When you have more than one paragraphs, use an ID tag instead of the element. For example in you case - you can say - jQuery('#hoverable').mouseover(color); – ddm310 Feb 24 '18 at 03:28