Can a specific input value be applied or utilized in any way?

I have limited coding experience, so please forgive me if this is a simple question.

I am curious if it is possible to create a feature on a website where user input is utilized elsewhere. Specifically, I am looking to have an input box where a user enters their name, and that name is then displayed in place of a designated "name" variable. For example, if someone enters the name "Alice", the text "Hello (name)" would show up as "Hello Alice".

I have not come across any resources that explain how to achieve this, which has left me wondering if it is even feasible.

My current focus has been on setting up the input box, and so far I have this code:

<body>
  <form>
  <label for="namebox">Name:</label>
  <br>
  <input type="text" id="uname" name="name" value="Namehere">
  <br>
  <button>Submit</button>
  </form>

  <p id="namebox"></p>

  <script>
  document.getElementById("namebox").innerHTML = "uname";
  </script>
</body>

Currently, the output of this script is directing to a non-existent page with the URL ending in "/?name=(whatever name value is inputted)".

If this concept does work, I am curious if the change to the "name" variable would only take place on the page with the input form, or if it would apply across all pages on the site.

I appreciate any assistance on this matter.

Answer №1

<script> 
document.getElementById("namebox").innerHTML = "Greetings" + document.getElementById("uname").value

</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I utilize npm with the original source code instead of minified or bundled code?

I am looking to access npm and JavaScript (or TypeScript) 3rd party libraries directly from the source code. Similar to how I can make changes in Python libraries by going into their source code, I want to have the same capability with my JavaScript depen ...

JavaScript Drag Events in Microsoft Edge (Including IE)

My drag event is functioning properly in Chrome, Safari, Firefox, and Opera. However, I encountered an error when running it on Microsoft Edge and IE: SCRIPT438: Object doesn't support property or method 'setDragImage' Below is the code sn ...

Move the text to the following line if a horizontal scroll bar is visible using JavaScript/JQuery and CSS styling

I have a section with multiple div elements...how can I ensure that when there is horizontal scrolling in the section, the hidden divs shift to the next line? HTML <section id="a"> <div class="num"> <div class="num"> <div class="num" ...

Use JavaScript to add a div element to the page ten times every time the button is clicked

Here is the code I have written: $(document).ready(function () { $('<button class="btn more">View More</button>') .appendTo(".listing-item-container") .click(function() { $(this).closest(". ...

Tips for generating AJAX requests directly from HTML documents

Hey there! I'm fairly new to JavaScript and have a question that might seem silly to some. How exactly can I invoke a function from a Coffeescript file within my HTML code? I'd like to give users the option to choose the language in which they v ...

Looking to handle a .csv file containing both quotes and commas within the quotes in Node.js - how can I achieve this

My code solution successfully parses a CSV file, but it doesn't handle cases where data has commas within quoted fields. For example, "not, accounted","normal". let filePath = Path.resolve(__dirname, `./MyData.csv`); let data = fs.readFileSyn ...

What are some effective replacements for SoundManager2 worth considering?

While Soundmanager2 is a useful app, many find the code to be overly complex and difficult to navigate. It almost seems as if it was purposely written in a way to confuse rather than clarify. Are there any recommended alternatives to Soundmanager2 that are ...

Can the parent's :active pseudo class be overridden?

I'm struggling with changing the color of a div when clicked while preventing its parent's pseudo-class from triggering. Here is the markup I have: <div class="parent"> I should change my color to green when clicked <div class="elem ...

Troubleshooting error in data structure for nested dynamic routes with Next.js getStaticPaths

I am working on a page called [categories][price].js and I am attempting to achieve a particular data structure within the getStaticPaths function. For example, I want to have paths like cat1/10, cat1/20, cat1/30, cat2/10, cat2/20, etc. I came across this ...

Multiple minute delays are causing issues for the Cron server due to the use of setTimeout()

I have an active 'cron' server that is responsible for executing timed commands scheduled in the future. This server is dedicated solely to this task. On my personal laptop, everything runs smoothly and functions are executed on time. However, ...

Select objects from an array that are contained within another array of objects

I am dealing with an array of objects that contain various attributes such as weakness, id, and type. [ { weakness: [ "Fire", "Flying", "Ice", "Psychic" ], id: 1, type: [ "grass", "poison" ] }, ...

Is there a way to keep a div element stationary during scrolling without using fixed positioning?

Is there a way to prevent a div from moving when scrolling up or down without using the position:fixed property? When an element is fixed, the scroll bar disappears making it impossible to reach the element by scrolling. div{ position:fixed; top:1 ...

"Encountered an error with the code example for partitioning routes in Express.js

Note: For those who are new to this, there is an error in the Express documentation example. Make sure to include the next(); statement in your code like so: people.use(function(req, res, next) { next();//This line is necessary for the example to work ...

Is the Bootstrap carousel sliding to the top after clicking the next and previous buttons?

Here is the carousel I created using Bootstrap: <div id="carouselExample" class="carousel slide d-none d-sm-none d-md-block" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active ...

Retrieving data in [slug].js using Reactjs

I am currently working on a project in Reactjs utilizing the "nextjs" framework. I have successfully managed to retrieve data (specific blog details) based on the slug([slug.js]). However, I now need to display data from all other blogs within the same c ...

Revise the if statement by using variables

Here is a function that already exists in a theme: function WShare( selector ) { var $this = $( selector ), $parent = $this.parent(); var opt = { url: window.location, text: document.title, }; if ( window.selectedText ) { ...

Utilizing the super method within a sails.js controller

Is there a way to call the default parent method of a redefined standard method in a controller created in sails.js? module.exports = { create: function(req, res) { //test some parameters if (condition) { //call regul ...

Issue with Bootstrap landing page layout - Container not adjusting to screen size correctly

Currently, I am engaging in a project to develop a landing page using Bootstrap as part of my practice. Unfortunately, I encountered an issue with the layout as the container does not align properly with the screen size. This imbalance causes the screen or ...

Learn the steps to export a constant value in Next.js using React!

I need to export the constant value views from BlogPost.js to blog.js. This is the content of BlogPost.js: import React from 'react'; import useSWR from 'swr'; import format from 'comma-number'; import { useColorMode, He ...

Optimize Your Reactstrap Carousel Images for Responsiveness

Despite my extensive search efforts, I have found very limited documentation on how to make images within a ReactStrap carousel responsive to resizing. While the ReactStrap carousel itself is responsive, the images inside it do not resize accordingly. So ...