CODEWITHSUNDEEP
javascripthtmlcssborder-image
user1011332
user1011332

Reputation: 773

Change border Image on Click

I am attempting to change the border image on click of a radio button and am doing the following:

<input type="radio" name="field" value="4" onclick="document.getElementbyId('pet').style.borderImage='url(http://ianon.info/pet_support/borders/pawprint.png) 120 round'"/>

I get the following error:

Uncaught TypeError: document.getElementbyId is not a function

Why does this work for the "border" option but not for the "borderImage" option. I'd like to define it onclick since all the JS functions I am defining in different parts of the document are not being recognized.

Upvotes: 0

Views: 357

Answers (3)

Andrew1996
Andrew1996

Reputation: 436

You made a spelling error, Change document.getElementbyIdto document.getElementById

Upvotes: 0

jackotonye
jackotonye

Reputation: 3853

Can defined it as a function in a script and using "getElementById" upper cases for function name. 

<script>
        function changeimg(){
 document.getElementById('pet').style.borderImage='url(http://ianon.info/pet_support/borders/pawprint.png) 120 round';
        }
       </script>

<body>
<input type="radio" name="field" value="4" onclick= changeimg()/>
</body>

Upvotes: 0

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94319

Typo. document.getElementbyId should be document.getElementById. Notice the capitalization in the function name.

Upvotes: 3

Related Questions