HTML/CSS JAVASCRIPT please help me answer this question I will give you a good rating Thank you! Given the following html dynamic application What is the output when the button is clicked ?( describe the visual effect when the button is clicked) Modify the output from the original web page, so that the html will create and place a new red div as illustrated inside the existing grey div and then transfers the paragraph inner content at run-time ( inside the javascript function ) from the paragraph inside the grey div into the red div as illustrated. DO NOT DO this by placing the paragraph content inside the div within the static HTML page, use the document object model to access elements from the paragraph and transfer content into the div element as illustrated First Illustration CS 193X: Web Fun CS 193X: Web Fun CS 3300 WEB FUN Announcements 4/3: Homework 0 is out! Due Friday. 4/3: Office hours are now posted. View Syllabus Click for Modify text in paragraph THE CSS FILE first_ill_RRR.css p{background-color:lavenderblush; border: 3px solid hotpink ; margin-left: 75px; margin-top:25px; width:300px; } h1{ margin-left: 380px;} a{ color:blue; margin-left: 150px;} .class1{ background-color:yellow;} .class4{font-size:10px; font-style:italic;} .div1{ background-color:rgb(255,255,0); border:2px solid black; width: 800px; height:300px; margin: 20px 20px 20px 20px; margin-left: 100px;} .div2{ background-color:rgb(125,125,125); border:2px solid black; width: 500px; height:200px; margin: 20px 20px 20px 20px; margin-left: 275px; } THE JAVASCRIPT FILE project_6p.js function onClick1( ) { text1 = document.getElementById("texta").value; para= document.getElementById('p1'); para.textContent = text1; if ( i % 2 == 0) {para.style.backgroundColor = "lavender";} else {para.style.backgroundColor= "thistle";} i = i +1; } var i=0; button1=document.getElementById('button1'); button1.onclick = onClick1;
HTML/CSS JAVASCRIPT please help me answer this question I will give you a good rating Thank you!
Given the following html dynamic application
- What is the output when the button is clicked ?( describe the visual effect when the button is clicked)
- Modify the output from the original web page, so that the html will
create and place a new red div as illustrated inside the existing grey div and then transfers the paragraph inner content
at run-time ( inside the javascript function ) from the paragraph inside the grey div into the red div as illustrated.
DO NOT DO this by placing the paragraph content inside the div within the static HTML page,
use the document object model to access elements from the paragraph
and transfer content into the div element as illustrated
<! DOCTYPE html>
<html>
<head>
<title> First Illustration</title>
<link rel="stylesheet" type="text/css" href="first_ill_RRR.css">
<script src="project_6p.js" defer></script>
</head>
<body>
<h4 class="class4">CS 193X: Web Fun</h4>
<h4>CS 193X: Web Fun</h4>
<h1>CS 3300 WEB FUN</h1>
<div class ="div1">
<div class ="div2" >
<p id="p1"><strong>Announcements</strong></br>
4/3: Homework 0 is out! <span class ="class1"> Due Friday.</span> </br>
4/3: Office hours are now posted.</p>
</br>
<a href="http://www.fordham.edu">View Syllabus</a>
</div>
</div>
</br></br>
<button id="button1">Click for Modify text in paragraph</button>
</br>
<input id ="texta" type="text" />
</body>
</html>
THE CSS FILE first_ill_RRR.css
p{background-color:lavenderblush;
border: 3px solid hotpink ;
margin-left: 75px;
margin-top:25px;
width:300px;
}
h1{ margin-left: 380px;}
a{ color:blue;
margin-left: 150px;}
.class1{
background-color:yellow;}
.class4{font-size:10px;
font-style:italic;}
.div1{
background-color:rgb(255,255,0);
border:2px solid black;
width: 800px;
height:300px;
margin: 20px 20px 20px 20px;
margin-left: 100px;}
.div2{
background-color:rgb(125,125,125);
border:2px solid black;
width: 500px;
height:200px;
margin: 20px 20px 20px 20px;
margin-left: 275px;
}
THE JAVASCRIPT FILE project_6p.js
function onClick1( ) {
text1 = document.getElementById("texta").value;
para= document.getElementById('p1');
para.textContent = text1;
if ( i % 2 == 0) {para.style.backgroundColor = "lavender";}
else {para.style.backgroundColor= "thistle";}
i = i +1;
}
var i=0;
button1=document.getElementById('button1');
button1.onclick = onClick1;
Step by step
Solved in 2 steps with 5 images
