0

I am working on some code where my objective is to create ten divs on the page. The divs will all contain the same class name, no IDs, and be styled. The goal is that on click that the div that is clicked change its style. I am using the 'This' function to achieve that however I cannot get my divs to change after I uploaded the file. On mousedown on any of the divs, only the particular div that is clicked is to change to 200x400 and red. The HTML text in the div is also supposed to change upon being clicked. Then on the mouseup anywhere on the body of the page all the divs should change back to green. Beneath is my code, I did have it working and now it seems I have messed up somewhere along the way. Any help would be appreciated. I had previously posted but have since deleted that post since I had made some changes to the code. Since those changes I have had the problem of the styles not changing.

My uploaded page

<!DOCTYPE html>
<html>

<head>
    <title>Page 1</title>
</head>


<style type="text/css">
    .div1 {
        background-color: green;
        height: 100px;
        width: 200px;
        color: red;
        text-align: left;
    }
</style>



<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">

$(".div1").mousedown(function(evt) {
  $(this).css({
    "height": "200px",
    "width": "400px",
    "background-color": "red",
    "color": "green",
    "text-align": "right",
  }).html("Lynch");
});


$(".div1").mouseup(function(evt) {
  $(this).css({
    "height": "100px",
    "width": "200px",
    "background-color": "green",
    "color": "red",
    "text-align": "left",
  }).html("Chris");
});

    </script>


<body>


<div class="div1">
    <h3>
        Chris
    </h3>
</div>


<div class="div1">
    <h3>
        Chris
    </h3>
</div>


<div class="div1">
    <h3>
        Chris
    </h3>
</div>


<div class="div1">
    <h3>
        Chris
    </h3>
</div>


<div class="div1">
    <h3>
        Chris
    </h3>
</div>


<div class="div1">
    <h3>
        Chris
    </h3>
</div>


<div class="div1">
    <h3
        Chris
    </h3>
</div>


<div class="div1">
    <h3>
        Chris
    </h3>
</div>


<div class="div1">
    <h3>
        Chris
    </h3>
</div>


<div class="div1">
    <h3>
        Chris
    </h3>
</div>


</body>


</html>
Chris Lynch
  • 1
  • 5
  • 1
    Duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – Phil Feb 27 '20 at 00:46
  • FYI, ` – Phil Feb 27 '20 at 00:46
  • Jeeze!! Thanks Phil brainfart on my end with that one. I suffer with my tracking and sometimes go to wrong line. That change was made! By the way my uploaded page is http://hcc-computerscience.com/lynch/page1.html . No actions work – Chris Lynch Feb 27 '20 at 00:52
  • Your [`jquery-3.4.1.min.js`](http://hcc-computerscience.com/lynch/jquery-3.4.1.min.js) script URL results in a 404 and your ` – Phil Feb 27 '20 at 00:54
  • Well thats not the link to my websitet because if you click the link I provided it takes you to the page. i thought you said – Chris Lynch Feb 27 '20 at 01:00
  • When I wrote that comment, your ` – Phil Feb 27 '20 at 01:03
  • jquery-3.4.1.min.js is in there. it is the src = jquery... – Chris Lynch Feb 27 '20 at 16:17
  • Did i not do $document ready and thats why it will not initialize – Chris Lynch Feb 27 '20 at 16:19

0 Answers0