CODEWITHSUNDEEP
javascriptjqueryhtml
G. Sutherland
G. Sutherland

Reputation: 1

Having trouble manipulating the DOM using JQuery

I am working on Hands-On: Manipulating the DOM using JQuery in Microsoft Dev211.1 introduction to HTML and JavaScript. This code is supposed to update the H1 and H3 elements in html. I have went over the code compared to what is in the instructions and I cant get it to work. Here is my code:

 <!DOCTYPE html>
 <html lang="en-US">
    <head>
       <title>HTML Page</title>
       <script type="text/javascript" src="https://code.jquery.com/jquery-   2.2.2.min.js"></script>
       <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <h1>H1 Header</h1>
        <hr />
        <h3>H3 Header</h3>
        <hr />
        <h3>Another H3 Header</h3>
    </body>
</html>

//JavaScript Code
$(document).ready(function () {
    manipulateDOM();
});

function manipulateDOM() {
    var h1Headers = $('h1');
    var h3Headers = $('h3');
}

 h1Headers.text('Hello World');
 h3Headers.css('color', '#37887D');
 h3Headers.first().css('text-decoration', 'line-through');

Upvotes: 0

Views: 482

Answers (2)

Tony M
Tony M

Reputation: 741

In Addition to Shakti's answer, you can change manipulateDOM() function to accept arguments so that you can use it in different places. 

    $(document).ready(function () {
        var h1_header = $('h1');
        var h3_header = $('h3');
      
      manipulateDOM(h1_header,h3_header);
    });


    function manipulateDOM(h1Headers, h3Headers) {
     h1Headers.text('Hello World');
     h3Headers.css('color', '#37887D');
     h3Headers.first().css('text-decoration', 'line-through');
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<body>
            <h1>H1 Header</h1>
            <hr />
            <h3>H3 Header</h3>
            <hr />
            <h3>Another H3 Header</h3>
        </body>

Upvotes: 1

Shakti Phartiyal
Shakti Phartiyal

Reputation: 6254

You need to place the JavaScript code inside <script></script> tags for it to work. And place it before closing html tags.

 <!DOCTYPE html>
 <html lang="en-US">
    <head>
       <title>HTML Page</title>
       <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
       <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <h1>H1 Header</h1>
        <hr />
        <h3>H3 Header</h3>
        <hr />
        <h3>Another H3 Header</h3>
    </body>
    <script type="text/javascript">
//JavaScript Code
$(document).ready(function () {
    manipulateDOM();
});

function manipulateDOM() {
    var h1Headers = $('h1');
    var h3Headers = $('h3');
 h1Headers.text('Hello World');
 h3Headers.css('color', '#37887D');
 h3Headers.first().css('text-decoration', 'line-through');
}

</script>
</html>

also remove the space from https://code.jquery.com/jquery- 2.2.2.min.js thus making it https://code.jquery.com/jquery-2.2.2.min.js

Also your 

 h1Headers.text('Hello World');
 h3Headers.css('color', '#37887D');
 h3Headers.first().css('text-decoration', 'line-through');

should come inside the function.

therefore making your function look like:

function manipulateDOM() {
    var h1Headers = $('h1');
    var h3Headers = $('h3');
         h1Headers.text('Hello World');
    h3Headers.css('color', '#37887D');
    h3Headers.first().css('text-decoration', 'line-through');
}

A running demo can be seen here:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>H1 Header</h1>
            <hr />
            <h3>H3 Header</h3>
            <hr />
            <h3>Another H3 Header</h3>
        <script type="text/javascript">
    //JavaScript Code
    $(document).ready(function () {
        manipulateDOM();
    });
    
    function manipulateDOM() {
        var h1Headers = $('h1');
        var h3Headers = $('h3');
             h1Headers.text('Hello World');
     h3Headers.css('color', '#37887D');
     h3Headers.first().css('text-decoration', 'line-through');
    }
    </script>

Upvotes: 1

Related Questions