简体   繁体   中英

Manipulating html page by .js file

I have successfully called the following JavaScript code to populate an image and description using parameters. The image and description are in tags and are called imagePlaceHolder and descriptionPlaceHolder. As I say, this works perfectly.

function changeImage(imgName,descriptiveText)
{
    image = document.getElementById('imagePlaceHolder');
    image.src = imgName;

    text = document.getElementById('descriptionPlaceHolder');
    PlaceHolder.innerHTML=descriptiveText;
}

What I now require is to place the javascript in its own file and call it from the HTML page using <script src="xxxx.js"></script>

The problem is that the object in the <div> is not recognized. I need to amend the line

document.getElementById('imagePlaceHolder');

to point to the HTML file containing object to manipulate.

Can anyone advise me of the correct syntax please?

In the HTML file you need to link the javascript file in the header

Eg

<head>
<script src="/scripts/yourjavascript.js" type="text/javascript"></script>
</head>

then do a onload function at the top of your javascript file

    window.onload = function(){
     changeImage("imgName", "descriptiveText");
    }

function changeImage(imgName,descriptiveText)
    {
        image = document.getElementById('imagePlaceHolder');
        image.src = imgName;

        text = document.getElementById('descriptionPlaceHolder');
        text.innerHTML=descriptiveText;
    }

any javascript using document should reference the html document

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM