Question

Java Script I need the code to produce these 3 output. I can only get it...

Java Script

I need the code to produce these 3 output. I can only get it to produce input #3

I need it to produce the following:

// Input #1:

// http://www.example.com

// Output

// http://www.example.com

// Input #2:

// http://www.example.com?name=r2d2

// Output

// http://www.example.com

// name: r2d2

// Input #3:

// http://www.example.com?name=r2d2&email=r2d2%40me.com&human=no

// Output

// http://www.example.com

// name: r2d2

// email: [email protected]

// human: no

THIS IS WHAT I HAVE SO FAR:

HTML

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>JavaScript URL Exercise</title>

<link

rel="stylesheet"

type="text/css"

href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"

/>

</head>

<body class="bg-info">

<form class="bg-light border rounded w-50 mx-auto mt-5 p-3">

<h2 class="mt-2 mb-4">String Manipulation</h2>

<div class="form-group">

<label for="comments">Enter a URL:</label>

<textarea class="form-control" id="comments" rows="1"> </textarea>

</div>

<div class="form-group mt-4">

<input type="submit" class="btn btn-info" value="Submit" />

<input type="reset" class="btn btn-secondary" value="Reset" />

</div>

</form>

<body class="bg-info">

<form class="bg-light border rounded w-50 mx-auto mt-5 p-3">

<h2 class="mt-2 mb-4">Results</h2>

<div class="form-group">

<h6>URL</h6>

<p id='url'></p>

<h6>Query Parameters</h6>

<div><span id='name'></span><span id='nameValue'></span></div>

<div><span id='email'></span><span id='emailValue'></span></div>

<div><span id='human'></span><span id='humanValue'></span></div>

</form>

<div id="resultForm"></div>

<script src="02-url.js"></script>

</body>

</html>

.JS

document

.getElementsByClassName("btn")[0]

.addEventListener("click", function (event) {

event.preventDefault();

let queryString = document.getElementById("comments").value;

//console.log(queryString);

let stringAfterDomain = queryString.indexOf("?");

let stringKeyValue = [];

let i = stringAfterDomain;

stringKeyValue.push(0, queryString.slice(0, stringAfterDomain));

while (stringAfterDomain <= queryString.length) {

let equal = queryString.indexOf("=", stringAfterDomain);

stringKeyValue.push(queryString.slice(stringAfterDomain + 1, equal));

stringAfterDomain += equal - stringAfterDomain;

let and = queryString.indexOf("&", stringAfterDomain);

if (!(queryString.lastIndexOf("=", queryString.length) == equal)) {

stringKeyValue.push(queryString.slice(stringAfterDomain + 1, and));

stringAfterDomain += and - stringAfterDomain;

} else {

stringKeyValue.push(queryString.slice(stringAfterDomain + 1));

stringAfterDomain += queryString.length;

}

}

console.log(stringKeyValue);

document.getElementById("url").innerHTML = stringKeyValue[1];

document.getElementById("name").innerHTML = stringKeyValue[2];

document.getElementById("nameValue").innerHTML = ": " + stringKeyValue[3];

document.getElementById("email").innerHTML = stringKeyValue[4];

document.getElementById("emailValue").innerHTML = ": " + stringKeyValue[5];

document.getElementById("human").innerHTML = stringKeyValue[6];

document.getElementById("humanValue").innerHTML = ": " + stringKeyValue[7];

});

Engineering   Computer-Science   
0 0
Add a commentTranscribed image text
Next >

Homework Answers

Answer #1

Changes only in Javascript file not in HTML

HTML

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>JavaScript URL Exercise</title>
   <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"/>
</head>
<body class="bg-info">
   <form class="bg-light border rounded w-50 mx-auto mt-5 p-3">
       <h2 class="mt-2 mb-4">String Manipulation</h2>
       <div class="form-group">
           <label for="comments">Enter a URL:</label>
           <textarea class="form-control" id="comments" rows="1"> </textarea>
       </div>
       <div class="form-group mt-4">
           <input type="submit" class="btn btn-info" value="Submit" />
           <input type="reset" class="btn btn-secondary" value="Reset" />
       </div>

   </form>

   <form class="bg-light border rounded w-50 mx-auto mt-5 p-3">
       <h2 class="mt-2 mb-4">Results</h2>
       <div class="form-group">
           <h6>URL</h6>
           <p id='url'></p>
           <h6>Query Parameters</h6>
           <div><span id='name'></span><span id='nameValue'></span></div>
           <div><span id='email'></span><span id='emailValue'></span></div>
           <div><span id='human'></span><span id='humanValue'></span></div>
   </form>
   <div id="resultForm"></div>
   <script src="02-url.js"></script>
</body>
</html>

Javascript

document.getElementsByClassName("btn")[0].addEventListener("click", function (event) {
   event.preventDefault();
   let queryString = document.getElementById("comments").value;

   //indexof method is return index of varible in string but if charcter is not available in string is return -1
   let stringAfterDomain = queryString.indexOf("?");

   //so use if else condition its check stringAfterDomain is greater than zero in first input url "?" is not available so execute if statement
   if(stringAfterDomain<0)
   {
       //Query parameters is not available in url so bind data with url name
       document.getElementById("url").innerHTML = queryString;
       document.getElementById("name").innerHTML = queryString;
   }
   else
   {
       // Query parameters is available in url
       let stringKeyValue = [];
       let i = stringAfterDomain;
       stringKeyValue.push(0, queryString.slice(0, stringAfterDomain))
       while (stringAfterDomain <= queryString.length)
       {
           let equal = queryString.indexOf("=", stringAfterDomain);
           stringKeyValue.push(queryString.slice(stringAfterDomain + 1, equal));
           stringAfterDomain += equal - stringAfterDomain;
           let and = queryString.indexOf("&", stringAfterDomain);
           if (!(queryString.lastIndexOf("=", queryString.length) == equal))
           {
               stringKeyValue.push(queryString.slice(stringAfterDomain + 1, and));
               stringAfterDomain += and - stringAfterDomain;
           }
           else
           {
               stringKeyValue.push(queryString.slice(stringAfterDomain + 1));
               stringAfterDomain += queryString.length;
           }
       }

       //add code for bind data
       let stringKeyValueUnique = [...new Set(stringKeyValue)]; //this is used for remove duplicates values in array
       document.getElementById("url").innerHTML = stringKeyValue[1]; //bind Url name
       //for loop for stringKeyValueUnique array
       for(var j=2;j<stringKeyValueUnique.length;j++)
       {
           //array value is equal to name
           if(stringKeyValueUnique[j] == "name")
           {
               //bind data of name Query parameters
               document.getElementById(stringKeyValueUnique[j]).innerHTML = stringKeyValueUnique[j];
               document.getElementById(stringKeyValueUnique[j]+"Value").innerHTML = ": " + stringKeyValueUnique[j+1];
           }
           else if(stringKeyValueUnique[j] == "email") //array value is equal to email
           {
               //bind data of email Query parameters
               document.getElementById(stringKeyValueUnique[j]).innerHTML = stringKeyValueUnique[j];
               document.getElementById(stringKeyValueUnique[j]+"Value").innerHTML = ": " + stringKeyValueUnique[j+1];
           }
           else if(stringKeyValueUnique[j] == "human") //array value is equal to human
           {
               //bind data of human Query parameters
               document.getElementById(stringKeyValueUnique[j]).innerHTML = stringKeyValueUnique[j];
               document.getElementById(stringKeyValueUnique[j]+"Value").innerHTML = ": " + stringKeyValueUnique[j+1];
           }

       }
   }
});

================================OUTPUT========================

Input #1:

Input #2:

Input #3:

One more input with two Query parameters

==Please Upvote==

0 0
Know the answer?
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for?
Ask your own homework help question
Similar Questions
I am trying to make a contact form to give input on another browser window. I...
I am trying to make a contact form to give input on another browser window. I am only getting the php code. I am trying to figure out why it won't post. Her is my html and php files: <!DOCTYPE html> <html> <head> <title>Contact</title> <link rel="stylesheet" href="main.css"> </head> <body>    <h1>Contact Form</h1> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="page2.html">My PodCast</a></li> <li><a href="page3.html">Contact Me</a></li> <li><a href="page4.html">Resources</a></li> <li><a href="addressbook.html">Address Book</a></li> <li>Contact Form</li> </ul> </nav> <center><h2>Please fill out form</h2> <div id='container'> <div id='header'></div> <center><h3>Contact</h3>...
In the previous assessment, you used a static set of named variables to store the data...
In the previous assessment, you used a static set of named variables to store the data that was entered in a form to be output in a message. For this assessment, you will use the invitation.html file that you modified in the previous assessment to create a more effective process for entering information and creating invitations for volunteers. Rather than having to enter each volunteer and create an invitation one at a time, you will create a script that will...
This will be my third time submitting this question. THERE SHOULD BE NO USE OF CSS...
This will be my third time submitting this question. THERE SHOULD BE NO USE OF CSS OR SWITCH STATEMENTS IN THE JAVASCRIPT. Even though there is stylesheet in the HTML file do no create a new one. Project Standards: Students will use click events to capture user input. Students will use variables to store information needed by their application and keep track of their program’s state. Students will use conditionals to control project flow. Project Task You will be building...
I NEED TASK 3 ONLY TASK 1 country.py class Country:     def __init__(self, name, pop, area, continent):...
I NEED TASK 3 ONLY TASK 1 country.py class Country:     def __init__(self, name, pop, area, continent):         self.name = name         self.pop = pop         self.area = area         self.continent = continent     def getName(self):         return self.name     def getPopulation(self):         return self.pop     def getArea(self):         return self.area     def getContinent(self):         return self.continent     def setPopulation(self, pop):         self.pop = pop     def setArea(self, area):         self.area = area     def setContinent(self, continent):         self.continent = continent     def __repr__(self):         return (f'{self.name} (pop:{self.pop}, size: {self.area}) in {self.continent} ') TASK 2 Python Program: File: catalogue.py from Country...
ADVERTISEMENT
Need Online Homework Help?

Get Answers For Free
Most questions answered within 1 hours.

Ask a Question
ADVERTISEMENT