Please modify this html code to make the foreground buttons work correctly. The
ID: 3879426 • Letter: P
Question
Please modify this html code to make the foreground buttons work correctly. The buttons should change the color of a box around the text, like in these example pictures (before and after pressing a button).
<html>
<head>
<title> Website </title>
</head>
<body>
<script language="JavaScript">
function changeColors(color)
{
switch(color)
{
case 'red':
document.bgColor="#FF0000";
break;
case 'green':
document.bgColor="#00FF00";
break;
case 'blue':
document.bgColor="#0000FF";
break;
}
}
function changeForeColors(color)
{
switch(color)
{
case 'rd':
document.getElementByID("demo").bgcolor="#FF0000";
break;
case 'gn':
document.getElementByID("demo").bgcolor="#00FF00";
break;
case 'be':
document.getElementByID("demo").bgcolor="#0000FF";
break;
}
}
</script>
<form name=”form1” method=”post” action=””>
<p>
<label>Background Colors</label>
<label>
<input type="radio" name=”Colors” value=”radio”>
Red</label>
<br>
<label>
<input type="radio" name=”Colors” value=”radio”>
Green</label>
<br>
<label>
<input type="radio" name=”Colors” value=”radio”>
Blue</label>
<br>
</p>
<br/><br/>
<p>
<label>Foreground Colors</label>
<label>
<input type="radio" name=”ForeColors” value=”radio”>
Red</label>
<br>
<label>
<input type="radio" name=”ForeColors” value=”radio”>
Green</label>
<br>
<label>
<input type="radio" name=”ForeColors” value=”radio”>
Blue</label>
<br>
</p>
</form>
<p id="demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis, neque eget faucibus luctus, libero dui consectetur augue, et tempor nisi diam a metus. Nullam vitae erat eget risus egestas scelerisque id suscipit leo. Nunc non mauris ipsum. Mauris commodo velit ac nibh ultricies lobortis. Fusce euismod euismod sapien vitae rutrum. Nulla ac aliquet urna. Vivamus blandit hendrerit imperdiet. Etiam pretium sapien quis nunc tincidunt, vitae sagittis diam porta. Curabitur placerat consectetur ante, quis semper leo tempus eget. Mauris ut ex convallis, imperdiet est in, interdum turpis. Phasellus porttitor egestas dapibus. Nulla et justo augue. In hac habitasse platea dictumst.
</p>
</body>
</html>
Lorem ipsum dolor sit amet, mauris quam, felis sed, eros quis neque ut odio, blandit non mollis egestas elit velit posuere. Non odio egestas donec a odio wisi. Luctus consectetuer est nulla, pulvinar urna dolor egestas, accusamus ut, tortor nullam potenti suscipit. Maecenas auctor mauris, nullam dictum non accumsan, ultrices cursus tincidunt, vestibulum fusce nascetur id mauris. Vel id ante netus aliquam quam in, mattis vehicula nullam. Sint sit elit, risus eget suscipit pede non, mauris libero etiam non, ornare a magna nam. Sed voluptate a. Tortor sollicitudin lacus vehicula turpis, ante aliquam, placerat id, purus venenatis. Laoreet elementum reprehenderit eget donec donec dictum, urna eros scelerisque, nunc faucibus, et tempus nibh, diam volutpat euismod odio eros. Ac morbi imperdiet. Dictum gravida molestie amet sapien malesuada donec. Consectetuer a vel per pellentesque curabitur, ullamcorper porta in est in, dolorem eveniet vulputate curabitur donec, ut morbi maecenas quisque vivamus amet wisi. Eu urna gravida sed lorem, lorem amet a, convallis molestie cuismod nunc, pede a, non sed non ad mauris maecenas rhoncus Foreground A D E Background A B C D EExplanation / Answer
this is the edited code , i think it will work fine and more over if you expect anything more please feel free to comment
-_-
<html>
<head>
<title> Website </title>
</head>
<body>
<script language="JavaScript">
function changeColors(color)
{
switch(color)
{
case 'red':
document.bgColor="#FF0000";
break;
case 'green':
document.bgColor="#00FF00";
break;
case 'blue':
document.bgColor="#0000FF";
break;
}
}
function changeForeColors(color)
{
switch(color)
{
case 'rd':
//document.getElementByID("demo").bgcolor="#FF0000"; // this was your old code , you can just use style tag , more over
// document.getElementById not ID nameing rules of java
document.getElementById("demo").style.backgroundColor="#FF0000"; // this will work fine
break;
case 'gn':
//document.getElementById("demo").bgcolor="#00FF00";
document.getElementById("demo").style.backgroundColor="#00FF00"; // new code
break;
case 'be':
//document.getElementByID("demo").bgcolor="#0000FF";
document.getElementById("demo").style.backgroundColor="#0000FF"; // new code
break;
}
}
</script>
<form name=”form1” method=”post” action=””>
<p>
<label>Background Colors</label>
<label>
<input type="radio" name=”Colors” value=”radio”>
Red</label>
<br>
<label>
<input type="radio" name=”Colors” value=”radio”>
Green</label>
<br>
<label>
<input type="radio" name=”Colors” value=”radio”>
Blue</label>
<br>
</p>
<br/><br/>
<p>
<label>Foreground Colors</label>
<label>
<input type="radio" name=”ForeColors” value=”radio”>
Red</label>
<br>
<label>
<input type="radio" name=”ForeColors” value=”radio”>
Green</label>
<br>
<label>
<input type="radio" name=”ForeColors” value=”radio”>
Blue</label>
<br>
</p>
</form>
<p id="demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis, neque eget faucibus luctus, libero dui consectetur augue, et tempor nisi diam a metus. Nullam vitae erat eget risus egestas scelerisque id suscipit leo. Nunc non mauris ipsum. Mauris commodo velit ac nibh ultricies lobortis. Fusce euismod euismod sapien vitae rutrum. Nulla ac aliquet urna. Vivamus blandit hendrerit imperdiet. Etiam pretium sapien quis nunc tincidunt, vitae sagittis diam porta. Curabitur placerat consectetur ante, quis semper leo tempus eget. Mauris ut ex convallis, imperdiet est in, interdum turpis. Phasellus porttitor egestas dapibus. Nulla et justo augue. In hac habitasse platea dictumst.
</p>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.