How can I change the color of a paragraph with javascript

I’ve been trying to find something that would make this work but after an hour of trying things I came here.

Here is the HTML code:

    <table>
      <tr>
        <th style="font-size: 17px;">Χρώμα</th>
      </tr>
      <tr style="border-collapse: collapse;">
        <td style="font-size: 15px;">
          Μαύρο <input type="radio" name="Color" onchange="myBlack()" checked/>
          Κόκκινο <input type="radio" name="Color" onchange="myRed()"/>
          Μπλέ <input type="radio" name="Color" onchange="myBlue()"/>
        </td>
      </tr>
    </table>

    <p id="paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Here is the JS code:

function myBlack() {
  document.getElementById("paragraph").style.color="#000000";
}

function MyRed() {
  document.getElementById("paragraph").style.color="#FF0000";
}

function MyBlue() {
  document.getElementById("paragraph").style.color="#0000FF";
}

From what I have seen the JS code that I am using is the most used one for what I am trying to do but it still doesn’t work. As you can see, I have three radio buttons and what I am trying to do is that when you click on the second radio button the color will change to the color it’s supposed to but nothing happens and the color doesnt change.

If you have any suggestions please do leave them. Thank you for your time.

Answer

The function names are misspelled in the javascript. Check the first letter, you have myRed() on the HTML and MyRed() on the javascript, the same for myBlue()/MyBlue().

Leave a Reply

Your email address will not be published. Required fields are marked *