Question

In: Computer Science

This is a question on the inputs and outputs on Basic javascript application What is the...

This is a question on the inputs and outputs on Basic javascript application

What is the displayed output of the application if the user inputs

Are: 1 in the first box, 2 in the second box, 3 in the third box, and 4 in the fourth box

Modify the HTML and javascript file in order to

Creates an h1 and a span element

ii) Accesses all the html elements, then adds the four input values as strings and sends the result

to the paragraph element and the span element

<!DOCTYPE html>

<html>

<head>

<title> Javascript Example </title>

<script src ="please3_test.js" type ="text/javascript" defer> </script>

</head>

<body>

<div>

<input id ="num1" type ="text" size ="3"/></br>

<input id ="num2" type ="text" size ="3"/></br>

<input id ="num3" type ="text" size ="3"/></br>

<input id ="num4" type ="text" size ="3"/></br>

<span id ="answer"> Show Output Here</span><br/>

<button id ="btn">Compute </button><br/>

</div>

</body>

</html>

please3_test.js

document.getElementById("btn").onclick = compute;

function compute() {

var input1 = document.getElementById("num1");

var input2 = document.getElementById("num2");

var input3 = document.getElementById("num3");

var input4 = document.getElementById("num4");

var answer2 = document.getElementById("answer");

var result = " ";

result= input2.value + input3.value + input4.value;

oddstr = 4;

var finstr = result + oddstr;

answer2.innerHTML = finstr;

result1 = parseInt(input1.value) +parseInt(input2.value) +parseInt(input3.value);

input4.value = result1;

}

Expert Solution

If the user inputs 1,2,3,4 respectively, the output that will be displayed in the 4th textbox will be 6 and the output in the answer span tag will be 2344.

For the HTML and JS modification question, please see the code below. The comments are provided for the better understanding of the logic.

HTML File

<!DOCTYPE html>
<html>
<head>
        <title> Javascript Example </title>
        <script src ="please3_test.js" type ="text/javascript" defer> </script>
</head>
<body>
        <div>
                <input id ="num1" type ="text" size ="3"/></br>
                <input id ="num2" type ="text" size ="3"/></br>
                <input id ="num3" type ="text" size ="3"/></br>
                <input id ="num4" type ="text" size ="3"/></br>
                <span id ="answer"></span><br/>
                
                <!--Declare the h1 tag and span tag here.  Provide the id field with a suitable name-->
                <h1 id="h1tag"></h1><br/>
                <span id="spantag"></span><br/>
                
                <button id ="btn">Compute </button><br/>
        </div>
</body>
</html>

Javascript file

document.getElementById("btn").onclick = compute;

function compute() {
        var input1 = document.getElementById("num1");
        var input2 = document.getElementById("num2");
        var input3 = document.getElementById("num3");
        var input4 = document.getElementById("num4");
        var result = " ";
        
        //Add the below lines of code.
        //The below line will concatenate the input from all the 4 fields as string.
        result = input1.value + input2.value + input3.value + input4.value;
        
        //The below lines will display the result in the newly created tags.
        document.getElementById("h1tag").innerHTML = result;
        document.getElementById("spantag").innerHTML = result;
}

The screenshots of the code and output are provided below.

venereology answered 9 months ago

What are the outputs of the "Define activity phase" and the inputs to the "Sequence activity...

What are the outputs of the "Define activity phase" and the inputs to the "Sequence activity phase" in the project time management? Explain why the schedule produced by the Sequence activity phase cannot be used as a reference to manage the time of the project

essay question: basic organizational structures (application question)

What are the advantages of importing inputs from Matlab and exporting outputs to the Matlab Workspace?...

What are the advantages of importing inputs from Matlab and exporting outputs to the Matlab Workspace? (Select all that apply). a. Simulation results can be analyzed further in Matlab. b. You can drag blocks from the Simulink Library Browser into the Matlab Workspace. c. You can import actual physical data into your model. d. Simulation results can be visualized with a wide variety of Matlab plotting functions.

Write a JavaScript program that computes the average of a collection of numbers and then outputs...

Write a JavaScript program that computes the average of a collection of numbers and then outputs the total number of values that are greater than the average. An A grade is any score that is at least 20% greater than the average. The B grade is any score that is not an A, but is at least 10% greater than the average. An F grade is any score that is at least 20% less than the average. The D grade...

Consider the following inputs and outputs associated with a DCS system.

Consider the following inputs and outputs associated with a DCS system. It is interesting to note that EXACTLY the same could be applicable to a SCADA system (although the SCADA system could use either a dedicated RTU or else a PLC). Break the following signals up (either going to, or away from the RTU-type devices) and indicate which are: i) digital inputs, ii) digital outputs, iii) analog inputs and iv) analog outputs: 18.1 ( 1 mark) START signal 18.2...

Write a defining table and a JavaScript program that computes and outputs the rate of change...

Write a defining table and a JavaScript program that computes and outputs the rate of change of a price. The program must allow the user to enter a previous price and a current price. The formula for the rate of change is rateOfChange = currPrice - prevPrice prevPrice Your program should allow a user to enter real numbers such as 7.54. If you wish, you may use the following HTML code in your program. <!DOCTYPE HTML> <html lang="en-us"> <head> <meta charset="utf-8">...

Write the programs in JavaScript: Write a program that reads a text file and outputs the...

Write the programs in JavaScript: Write a program that reads a text file and outputs the text file with line numbers at the beginning of each line.

describe the inputs, the plants, and the outputs of open-loop control systems.

Which of the following are measures of capacity in terms of outputs and inputs produced for...

Which of the following are measures of capacity in terms of outputs and inputs produced for the corresponding production system? Select one: A. Airline – customers checked out per hour – reservation calls handled per day B. Supermarket – available seat miles per year – cartons unloaded per hour C. University – graduates per year – students admitted per year D. Automobile assembly plant – autos assembled per year –packages delivered per day In planning the long-term capacity of an...

Describe what are examples of inputs, processing, ans outputs for the following: 1. computer 2. TV...

Describe what are examples of inputs, processing, ans outputs for the following: 1. computer 2. TV 3. Basketball game