Having trouble making this button function in HTML/JavaScript?

As a beginner learning Javascript by following a tutorial, I tried to copy this code exactly as shown but it's not functioning as expected. The video tutorial was created in 2015 so I'm wondering if there have been any changes to the language since then that could be affecting the code. Any assistance would be greatly appreciated. Thank you

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript Example</title>
  <script type="text/javascript">
    function substitute() {
      var myValue = document.getElementById('myTextBox').value;

      if (myValue.length === 0) {
        alert('Please enter a real value in the text box!');
        return;
      }

      var myTitle = document.getElementById('title');
      title.innerHTML = myValue;

    }
  </script>

</head>
<body>
  <h1 id="title">JavaScript Example</h1>

  <input type="text" id="myTextBox" />
  <input type="submit" value="Click Me" onclick="substitute();" />

</body>
</html>

Answer №1

customize it,

<input type="text" id="myTextBox">
<input type="submit" value="Submit" onclick="swap();">

You implemented a function swap but mistakenly calling switch.

Answer №2

The title of the variable is currently undefined. It should be updated to:

assignTitle.textContent = assignValue;

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

Exploring Metadescription in Blogdown: A Comprehensive Guide

After creating a website using blogdow, I quickly realized that adding metadescriptions permanently was not as straightforward as I had hoped. I attempted to incorporate metadescritions in public/index.html, and initially succeeded. However, every time I ...

Retrieve the input values and arrange them neatly in a table

I am encountering an issue with extracting values from a table. My goal is to retrieve all the input values from the table, but I am finding it challenging because the number of rows in the table can vary. <table id="receiptTable" class="table table-bo ...

Unable to get div elements to expand to their full width

Trying to center items within a div, but having issues achieving the desired output. This is an image of the desired layout: https://i.sstatic.net/949al.png The items in the div are aligning to the left and the input text does not stretch across ...

The jQuery ajax function seems to be malfunctioning when attempting to send a post request

Having trouble with AJAX? Let me show you my approach to making a POST request to my RESTful service using AJAX: var lat = marker.getPosition().lat(); var lng = marker.getPosition().lng(); //xmlhttp.open("GET","http://192.168.1.100:8080/MapDemo/serv ...

CSS KeyFrame animations

My goal is to have my elements gracefully fade in with 2 lines extending out of a circle, one to the left and one to the right. However, I am struggling to achieve this. Every time I attempt to display the lines, it ends up shrinking the entire design. M ...

Updating meta tags dynamically for Facebook sharing using Angular 6

I am struggling to dynamically update meta tags such as og:title, og:description, and og:image for sharing on Facebook. I have attempted various methods without success. Initially, I tried setting meta tags with JavaScript like this: var meta = document. ...

Tips for aligning the TextBox in the center of an Asp.net website

I have the following HTML/ASP code that I need to center the TextBox on the display page. Here is my code snippet below. Ideally, I would like to have the label displayed next to the TextBox once it is centered. <center> <div class="container ...

Is the browse button for selecting a file not appearing in IE8?

I captured an image of my file input method in both IE 9 and 8. Why is the browse button not appearing in Internet Explorer? The table is embedded inside a form as shown below: <table> <tr> <td colspan="2"><h3>Upload Ph ...

Creating a link with a POST method and without using a new line

I am attempting to generate a square matrix and send data using the post method. I have discovered a solution involving JavaScript and form submission, but each time a new form is created, it results in a new line being added. Alternatively, if I move th ...

Combining two arrays containing objects in JavaScript

Imagine having 2 arrays of objects that you want to merge in a parallel manner. For instance var array = [{foo: 2} , {boo: 3}] var array2 = [{foo2: 2}, {boo2: 4}] The outcome would be var array3 = [{foo:2,foo2:2},{boo:3,boo2:4}] In what way can this be ...

Adding dynamic colors to nested and sibling divs with a specific class

I am facing an issue with applying alternating colors to nested divs. The challenge is that these divs are not always siblings within the list items. Here is the HTML structure: <ul> <li> <div class="R">Bat</div> ...

Avoiding remote submission in Grails forms: Best practices

<g:formRemote name="form1" update="homeBody" url="[controller: 'xxx', action:'aaa']"> <Button type="submit">Save</Button> </g:formRemote> I am facing a scenario where I need to place a text field o ...

What is causing the resistance in changing the color of my current navigation items?

I've encountered a small challenge with my header section. Despite multiple attempts, I'm struggling to change the color of the 'current' menu item. It seems that overriding Bootstrap's default color is proving to be more difficult ...

How can you add an object to an array in JavaScript without knowing the index?

I am working with an array var prices = ['100','200','300','500']; In my code, I am trying to insert a price if certain conditions are met. var index = prices.indexOf(400); if(index){ prices.splice(1, ...

Updating chart.js data seems to be presenting some challenges

Need help fetching data with an AJAX request to update chart.js. The AJAX request is working fine, but the response doesn't update the chart. This is how I fetch the data: <script type="text/javascript"> $(document).ready(function(){ $("#da ...

The best way to choose an element that lacks a class beginning with a specific prefix

Trying to apply a style for all input elements that do not have a class starting with "border-radius": input:not(class^="border-radius") { This method is not producing the desired result. Any alternative suggestions? ...

Using Ajax/jQuery in combination with Mongodb

My experience with Ajax/jQuery is fairly new. I am currently working on creating a sample HTML page using Ajax/jQuery to retrieve all customers and search for a customer by ID. Each customer has three variables: ID, firstName, and lastName. I am looking t ...

Manipulate a value using JavaScript

While the intention is for the button value to switch between 1 and 0, the echo $_POST["ordina"] consistently returns 1. Despite checking the code multiple times, I am unable to identify the issue. <script> function order() { if (document.ordination ...

Prevent Previous/Next Buttons, Autofill, and Completion Bar on iPhone Web Forms

Can the bar on web forms that includes the (Previous|Next) Autofill and Done button be disabled or suppressed? I know there are solutions for native apps, but I am specifically working on a web app. I'm wondering if there is a simple attribute to add ...

Guide to establishing intricate conditions for TypeORM insertion

When attempting to insert data based on a specific condition, such as if shopId = "shopA", I want to include the shopdetail. In order to achieve this, I have implemented the following business logic, which is somewhat complex. Is there a more ef ...