CODEWITHSUNDEEP
javascripthtml
ARI FISHER
ARI FISHER

Reputation: 353

Basic HTML Button not changing text

I am trying to create a website showing off the power of CSS and JS. The CSS part seems to be working well, but the JS part isn't. I am trying to change the text, "Hello World," with a button press. However, whenever I press the button, it doesn't do anything.

I've tried fixing my tag, trying different event handlers, putting the output in a function, subsequently removing it from the function, moving my script directly into the HTML, and using window.onload but none of it works. 

<head>
        ><link rel="stylesheet" type="text/css" href="mystyle.css">
        ><script type="text/javascript" src="../mybutton.js"></script>
    </head>
<p id="gold">Hello World</p>
<button type="button" id="jsClick">Don't Click<button>
<button type="button" id="jsHeal">Heal My World<button>

JS:

window.onload = function() {
    document.getElementById("jsClick") = function()>>{document.getElementById("Gold").innerHTML = "Please don't click";};
    document.getElementById("jsHeal") = function()>>{document.getElementById("Gold").innerHTML = "Hello World"};
}

My expected result would be to click the button and change the text of my paragraph. The actual output is that all the HTML and CSS loads as usual, but when I click, nothing happens. Edit: I have tried all the answers. I believe something is off with actually running JavaScript, as even programming the JavaScript directly in the HTML isn't working.

Upvotes: 0

Views: 961

Answers (4)

Chris
Chris

Reputation: 363

ids and classes are case sensitive in HTML and Javascript, therefore gold is not equal to Gold

Upvotes: 0

Omi in a hellcat
Omi in a hellcat

Reputation: 720

Added a function called change() which changes the paragraph text to hello world using an onClick event.

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    <script type="text/javascript" src="../mybutton.js"></script>
</head>


<p id="gold">Hello World</p>
<button type="button" id="jsClick">Don't Click<button>
<button type="button" onclick="change()" id="jsHeal">Heal My World<button>



<script>

function change()
{
document.getElementById("gold").innerHTML="Hello World";
}


</script>

Ps. lots of errors in your code should look into cleaning that up

Upvotes: 1

gabriel.hayes
gabriel.hayes

Reputation: 2313

There's a couple of issues:

  1. The IDs don't match; Gold is not gold
  2. That's not how you initialize a function, remove the >>
  3. You can't assign a value to the return value of a function (document.getElementById("jsClick") = doesn't work, you can't assign values this way); likely you want to set the onclick property to that function.
  4. You didn't close the <button> tag.

Here's a working example of what you've provided:

<head>
        <link rel="stylesheet" type="text/css" href="mystyle.css">
        <script type="text/javascript" src="../mybutton.js"></script>
    </head>
<p id="gold">Hello World</p>
<button type="button" id="jsClick">Don't Click</button>
<button type="button" id="jsHeal">Heal My World</button>
<script type="text/javascript">
window.onload = function() {
    document.getElementById("jsClick").onclick = function(){document.getElementById("gold").innerHTML = "Please don't click";};
    document.getElementById("jsHeal").onclick = function(){document.getElementById("gold").innerHTML = "Hello World"};
}
</script>

Upvotes: 1

Andrei Sandica
Andrei Sandica

Reputation: 36

<button type="button" id="jsClick" onclick="changeMe()">Don't Click</button>

function changeMe() {
const myButton = document.getElementById("jsClick");
myButtoon.innerText = "Some random text"
}

Or you could select your element with DOM and add an event listener on it , a click event listener which triggers a function that does the above thing. Hope it helps

Upvotes: 0

Related Questions