Changing background color and text, logic is there but script not working?

0
votes

I'm doing a problem for one of my homework assignments. We are supposed to change the background color and text, the user can select what color and whether to change the font from Serif or Sans-Serif. I feel like this is an easy script and i 'feel' like my logic is there but when I click on one of the colors or the fonts it does not change anything.

<!DOCTYPE html>
<html>
    <head>
    <title>12.6</title>
    <script type="text/javascript">

    function changeBGC(color)
    {
        document.bigColor = color;
    }

    function changeFontFamily(fontFam)
    {
        document.getElementById("para").style.fontFamily = fontFam;
    }
    </script>
</head>

<body>
    <a href="#" onClick="changeBGC('blue')">Blue Color</a>
    <a href="#" onClick="javascript:changeBGC('yellow')">Yellow Color</a>
    <a href="#" onClick="javascript:changeBGC('green')">Green Color</a>

    <br>

    <a href="#" onClick="javascript:changeFontFamily('Arial, sans-serif')">SansSerif font!</a>
    <a href="#" onClick="javascript:changeFontFamily(serif')">Serif font!</a>

    <p id='para'> Text</p>

</body>
</html>
2
javascripthtmlcss
It's also advised to have the opening curly brace in JS on the same line not the next one. automatic semicolon insertion – Marina Dunst
You're missing ' sign at changeFontFamily('serif') – ii7scw

2 Answers

1
votes

I think you have a mistake in your function.

try document.bgColor = color in your changeBGC function

0
votes

You have a few mistakes in your code,some missing/closing '

I fixed it and now it should work

<!DOCTYPE html>
<html>
<head>
<title>12.6</title>
<script type="text/javascript">

function changeBGC(color)
{
    document.getElementById("body").style.background = color;
}

function changeFontFamily(fontFam)
{
    document.getElementById("para").style.fontFamily = fontFam;
}
</script>
</head>

<body id="body">
<a href="#" onclick="changeBGC('blue')">Blue Color</a>
<a href="#" onclick="changeBGC('yellow')">Yellow Color</a>
<a href="#" onclick="changeBGC('green')">Green Color</a>

<br>

<a href="#" onclick="changeFontFamily('Arial, sans-serif')">
SansSerif font!</a>
<a href="#" onclick="changeFontFamily('serif')">Serif font!</a>

<p id='para'> Text</p>

</body>
</html>