This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" />...

Question

Question

This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" />...

This is my code so far:

<!DOCTYPE html>
<html>
<head>
<title>JavaScript is fun</title>
<meta charset="utf-8" />
</head>
<body>
<script type ="text/javascript">
//declare a variable and store text in it
var x = "JavaScript is fun";
//write the variable 5 times
document.write(x + x + x + x + x);
//store 5 as string in variable x
x = "5";
//store 3 as string in variable y
var y = "3";
//write the value x + y to the document
document.write("<br>");
document.write(x + y);
</script>
</body>
</html>

Now I must apply these instructions to it:

• So what if we wanted this JavaScript to happen after a user does something and not right when the page loads? We would place the JavaScript code inside of a function and then ask that function to occur after we detect that a user does something. o Follow these instructions to place the code in a function: http://www.w3schools.com/js/js_functions.asp o Our code to be executed is not only the document.write() statement, but also the line where we establish the variable and give it a value o Now our code will not run when the page loads, so we will need an event to happen to run it. To keep things simple, we can add a button tag (https://www.w3schools.com/tags/tag_button.asp) except this time add the event attribute onclick. This onclick attribute will do something when the user clicks the button. What we want it to do is run our function, so we will set the onlcick value equal to the name of our function (i.e. if my function was named fun I would write ) o Now click the button and your function should run and print out what you asked it to. o But wait, where did our button go? It, along with any other HTML we had on the page will disappear if document.write() is run after the page initially loads. It is essentially replacing all of the document with just what is in between the (). o So if we wanted to print out that JavaScript is fun below the button, we could instead of having it write to the document itself, we could have it replace some text within a certain element (html tag) within the document. o So underneath the button, let’s put a paragraph tag and have it read “this will change” 

this will change

o We are going to change the innerHTML property of this tag. The innerHTML of a tag is the stuff that is in between the opening and closing tags, which in this case is the text “this will change” o First we need to, within JavaScript, identify the tag that we want to change. We can do this by using the getElementById() method. This method simply locates an element with a specified id (similar to intrapage links). So place an id attribute in the opening paragraph tag (i.e.

) and then place the same id in the () of the method (i.e. getElementById(“change”). o Once again I said we will change the innerHTML property of this element, so we will attach the innerHTML property to it by saying getElementById(“change”).innerHTML o Now all we need to do is say which object this element is associated with. It is within the document, so we can use the document object and specify that by saying document.getElementById(“change”).innerHTML o Now that we have identified what we want to change, let’s change it. We do that by setting what we want to change to be equal to the new value, so for me it is: document.getElementById(“change”).innerHTML = x+x+x+x+x; • If we wanted to, we could copy everything between the script tags to a new notepad document, and save it as an external JavaScript file. This is a good idea to always do, as the validator does not like much JavaScript.

engineering Computer-Science

Add a comment Improve this question Transcribed image text

Answer 1

Answer #1

Dear Student ,

As per the requirement submitted above , kindly find the below solution.

Here a new web page with name "fun.html" is created, which contains following code.

fun.html :

<!DOCTYPE html>

<html>

<head>

<title>JavaScript is fun</title>

</head>

<body>

<p id="change">this will change</p>

</body>

</html>

**************************

fun.js :

//function fun

function fun(){

//declare a variable and store text in it

var x = "JavaScript is fun";

//write the variable 5 times

//get the element p and change innerHTML

document.getElementById("change").innerHTML=x + x + x + x + x;

//store 5 as string in variable x

//x = "5";

//store 3 as string in variable y

//var y = "3";

//write the value x + y to the document

//document.write("<br>");

//document.write(x + y);

}

======================================================

Output : Compile and Run fun.html to get the screen as shown below

Screen 1 :fun.html

Screen 2:Screen when button is clicked

NOTE : PLEASE FEEL FREE TO PROVIDE FEEDBACK ABOUT THE SOLUTION.

Add a comment

Answer 2

This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" />...

Homework Answers

Add Answer to:
This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" />...

Post as a guest

Earn Coins

Javascript to edit a HTML file. Where to begin? <!doctype html> <html> <head> <meta charset="utf-8"> <title>TODO:...

Please help me with this code for javascript. <!DOCTYPE html> <html> <head> <title>Strings and Arrays</title> <script>...

How to make all the buttons work using javascript? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta...

<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <title>Plaid Scarf Selector</title> <link rel="stylesheet" href="a3.css" />...

Could you please help me write a Javascript code that will show a smiley face picture...

I have some code for HTML/Javascript but I need to change it up a bit. Heres...

in the following java script code follow the instructions provided <!DOCTYPE html> <html> <head> <!-- JavaScript...

Rewrite the code below using JavaScript only <!DOCTYPE html> <html> <head> <style> .hidden {display:none;} </style> <script...

<!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Da...

Both codes <!DOCTYPE html> <html> <head> <title>Week 8 Lab - JavaScript DOM and Arrays</title> <meta charset="utf-8">...

This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" />...

Homework Answers

Add Answer to: This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" />...

Post as a guest

Earn Coins

Add Answer to:
This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" />...