Create a custom URL based on the text provided

Question

Create a custom URL based on the text provided

I have a task of creating a new URL based on user input text

Name: <input type="text" id="myText" >
<button onclick="myFunction()">check tracking</button>

When using DHL service, it requires adding a specific code to the URL like this:

https://nolp.dhl.de/nextt-online-public/en/search?piececode=

and then appending the tracking code. Here is an example URL:

https://nolp.dhl.de/nextt-online-public/en/search?piececode=48484848484848484

Below is the Javascript code I have:

function myFunction() {
var inputed_code = document.getElementById("myText").value ;
var dhlurl = "https://nolp.dhl.de/nextt-online-public/en/search?piececode="
var new_url = dhlurl + inputed_code ;
    window.open(new_url, "_blank");
}

However, the result is not generating a new URL. What could be causing this issue?

javascript

Answer 1

Answer №1

function createTrackingUrl() {
  var dhlurl = "https://nolp.dhl.de/nextt-online-public/en/search?piececode=";
  var trackingCode = document.getElementById("trackingInput").value;
  var newTrackingUrl = dhlurl + trackingCode;
  console.log(newTrackingUrl);

  //window.open cannot be used in this code snippet, but you can see the URL in the console.log()
  //window.open(newTrackingUrl, "_blank");
}

Enter Tracking Code: <input type="text" id="trackingInput">
<button onclick="createTrackingUrl()">Track Package</button>

Answer 2

function createTrackingUrl() {
  var dhlurl = "https://nolp.dhl.de/nextt-online-public/en/search?piececode=";
  var trackingCode = document.getElementById("trackingInput").value;
  var newTrackingUrl = dhlurl + trackingCode;
  console.log(newTrackingUrl);

  //window.open cannot be used in this code snippet, but you can see the URL in the console.log()
  //window.open(newTrackingUrl, "_blank");
}

Enter Tracking Code: <input type="text" id="trackingInput">
<button onclick="createTrackingUrl()">Track Package</button>

Answer 3

Answer №2

To make your javascript function work correctly, place it within script tags at the bottom of your HTML body section:

<script>
function myFunction() {
var enteredCode = document.getElementById("inputText").value ;
var dhlLink = "https://nolp.dhl.de/nextt-online-public/en/search?piececode="
var newLink = dhlLink + enteredCode ;
    window.open(newLink, "_blank");
}
</script>

Following this structure will ensure the function operates as intended.

Answer 4

To make your javascript function work correctly, place it within script tags at the bottom of your HTML body section:

<script>
function myFunction() {
var enteredCode = document.getElementById("inputText").value ;
var dhlLink = "https://nolp.dhl.de/nextt-online-public/en/search?piececode="
var newLink = dhlLink + enteredCode ;
    window.open(newLink, "_blank");
}
</script>

Following this structure will ensure the function operates as intended.

Create a custom URL based on the text provided

Answer №1

Answer №2

Similar questions

Unable to make anchor tag inside button effectively collapse another div

Is verifying email and password with jquery possible?

Is there a way to instruct npm to compile a module during installation using the dependencies of the parent project?

Tips for modifying the content displayed on a v-list in Vue.js dynamically

Instructions for outputting a string to the console in Javascript

`Javascript framework suggests ajax navigation as the preferred method`

The maxBodySize feature is ineffective in restify

Converting objects to arrays in AngularJS and Ionic: A simple guide

Wiki experiencing issues with NodeJS HttpGet functionality

Tips for implementing WebSockets with Play Framework

What exactly does Apple consider as a "user action"?

Having trouble with your JSONP callback not being received?

Renaming form elements using JQuery's .load method

Obtain the Xpath for the element with a certain tag located closest to the given element in its immediate surrounding

Unable to utilize the "let" keyword in WebStorm

restore the HTML element to its initial position after being moved

Using JavaScript to print radio type buttons

Avoid navigating through hidden tab indexes

How can you identify dynamically created elements within an AngularJS directive?

choose a unique jQuery id without any duplicates