Simple Javascript code (function) is not working

Question

The simple javascript is not working. When I test the code in live preview (chrome), it says "ThfJ8q9:58 Uncaught ReferenceError: textpage is not defined at HTMLButtonElement.onclick (ThfJ8q9:58)"

What I am trying to do is to change the background image of the div "chat" when the button is clicked to the new image specified.

HTML:

<div id="chat"> 
    <div class="button-class">
     <button type="button" onclick="textpage()"> <img class= "submit-button- 
      img" alt="submit-button" src="images/text.button.png"> </button>
    </div>  
</div>

JAVASCRIPT DOCUMENT:

function textpage() {
document.getElementById("chat").style.backgroundImage = "url('full-convesation- 
MRP.png')";
}

Might be because a closing bracket is missing somewhere in your code. You will need to provide us more then that. — Liad Yogev, Aug 17 '19 at 10:09
Is your javascript code in the HTML file itself or separate js file? — sanketd617, Aug 17 '19 at 10:09
Where are you executing this code? In JSFiddle? See [Why does this simple JSFiddle not work?](https://stackoverflow.com/q/7043649/4642212). — Sebastian Simon, Aug 17 '19 at 10:11
@cocool97 Because if you call `this.textpage` in onclick of a button, `this` will refer to the button itself and button doesn't have a method named `textpage`. — sanketd617, Aug 17 '19 at 10:14
@cocool97 should my onclick reference be somewhere else in that line? — Sophie Sheppard, Aug 17 '19 at 10:16
@SophieSheppard It all depends on _where_ the JS is, in relation to the HTML. Please [edit] your question and show a _minimal, but complete_ HTML document. — Sebastian Simon, Aug 17 '19 at 10:17
@SophieSheppard I highly recommend you create a jsfiddle.net that reproduces your problem. It will allow us to see exactly what you are doing wrong (and it is quite likely you will discover the cause of your issues in the process) — Omn, Aug 17 '19 at 10:17
@Omn JSFiddle isn’t the right choice here, because it may create exactly the same issue and it wouldn’t reveal where the problem is. Again, see [Why does this simple JSFiddle not work?](https://stackoverflow.com/q/7043649/4642212). — Sebastian Simon, Aug 17 '19 at 10:18
@sanketd617 Just solved the issue by adding the code into the html file. I believe there may have been a order issue as I have other JS files linked in my html. Thank you for your help! — Sophie Sheppard, Aug 17 '19 at 10:19
How do I say solved on an issue? Haha i'm new to this website! — Sophie Sheppard, Aug 17 '19 at 10:20
@Sophie how about adding the answer yourself and marking it as accepted? ;) — sanketd617, Aug 17 '19 at 10:28

Connor Brown · Answer 1 · 2019-08-17T10:27:06.000

Could use something like this to listen for a click on the button

https://codepen.io/CTBroon/pen/RwbRGQq

HTML


    <div id="chat"> 
        <div class="button-class">
         <button type="button" id="btns"> <img class= "submit-button- 
          img" alt="submit-button" src="images/text.button.png"> </button>
        </div>  
    </div>

JS


    var btntrigger = document.getElementById('btns');

    btntrigger.addEventListener('click', function(){
      document.getElementById("chat").style.backgroundImage = "url('https://placehold.it/400x400')";
    })

Or have a closer look at your syntax on the orginal, fixed here:

https://codepen.io/CTBroon/pen/RwbRGQq

HTML


    <div id="chat"> 
        <div class="button-class">
         <button type="button" onclick="textpage()">
           <img class="submit-button-img" alt="submit-button" src="images/text.button.png"> </button>
        </div>  
    </div>

JS

function textpage() {
  document.getElementById("chat").style.backgroundImage = "url('https://placehold.it/400x400')";
}

:)

Simple Javascript code (function) is not working

1 Answers1