Why is this button not changing text in javascript and html

Admin 1
Viewed 159

I need this button to change from "$5 USD" to "$10 USD" through the means of activating a function from a different button. I have updated the question to include more html and css information since uploading it. Here is the button whose text needs to be changed, and the button that activates said change:

function increase() {
  document.getElementById("money").value = "$10 USD";
}
.fader1{
  -webkit-animation: fadein 3s; 
}
.dog{
  -webkit-animation: fadein 8s;
  width:50%;
  height:50%;
}
.fader2{
  -webkit-animation: fadein 8s; 
}
@keyframes fadein {
  from { opacity: 0; }
  to   { opacity: 1; }
}
h1{
  font-size:320%;
}
h2{
  font-size:200%;
}
div{
  text-align:center;
}
button,
#money{
  width:20%;
  height:150px;
  font-size:120%;
}
<body>
  <div>
    <h1 class="fader1">Increase payment?</h1>
    <img class="dog" src="https://i.imgur.com/BAz7AGU.jpg">
      <div class="fader2">
        <input id="money" type="button" value="$5 USD" />
        <button onclick="increase()">Increase</button>
      </div>
  </div>
</body>

I have updated this question as changing innerHTML to value did not change the outcome, so I hoped more context would help.

button html javascript
2 Answers

As pointed out in the comments, you need to set the value of the input. Try this:

function increase() {
  document.getElementById("money").value = "$10 USD";
}
<input id="money" type="button" value="$5 USD">
<button onclick="increase()">Increase</button>

Update after question edit:

It seems like you haven't linked your js code with html. If you open the developer console in your browser, you will get a reference error: ReferenceError: increase is not defined. That means your html doesn't know about the increase() function you have written.

You could fix that in a couple of ways.

The easiest one would be to add it directly to the html, in the script tag:

<body>
    <div>
        <!-- your other code -->
    </div>
    <script>
        function increase() {
            document.getElementById("money").value = "$10 USD";
        }
    </script>
</body>

The recommended way of doing it is linking the .js file, in which you will write the function, to the .html file:

.html file:

<body>
    <div>
        <!-- your other code -->
    </div>
    <script src="main.js">
    </script>
</body>

main.js file:

function increase() {
  document.getElementById("money").value = "$10 USD";
}
user_121622430
  1. Change line 2 of your JS from .innerHTML to .value
  2. Not sure how your script is linked but try moving <script></script> to your HTML footer to ensure DOM is fully loaded before the JS function attempts to select the button element
  3. If still not working, check your console for any errors
user_96808430
Related