The function getElementById is unresponsive

<form id="form1">
    Title: <input type="text" id="title1" size="25"/><br/><br/><br/>
    Description <input type="text" id="desc1" size="55"/><br/><br/><br/>
    <input type="submit" value="Submit" onclick="doit();"/>
</form>

<script type="text/javascript">
function doit(){
    var title = document.getElementById("title1").value;
    var description = document.getElementById("desc1").value;

    document.write("<h3>Title: " + title + "</h3>");
    document.write("<h3>Description: " + description + "</h3>");
}
</script>

I am seeking assistance regarding the use of getElementById. My script is designed to extract user input from textboxes and display it on the webpage when they click submit utilizing document.write. However, the code is not functioning as anticipated.

<script type="text/javascript>
function doit() {
    document.write("Do it function");
    var title = document.getElementById("title1").value;
    var description = document.getElementById("desc1").value;

    document.write("<h3>Title: " + title + "</h3>");
    document.write("<h3>Description: " + description + "</h3>");
}
</script>

The issue is that the script does not progress beyond the first line of the function. The button contains:

<input type="submit value="submit" onclick="doit();"/>

Answer №1

Assuming you have the following:

<input type="submit value="submit" onclick="doit();"/>

You are missing a quote mark which should be obvious by the syntax coloring. It's important to use an editor that provides such features.

The correct code should be:

<input type="submit" value="submit" onclick="doit();"/>

Another thing to keep in mind is that using document.write() after the document has been closed will automatically open and clear the document, potentially causing any controls with those IDs to disappear based on your HTML structure.

Answer №2

Please make the necessary changes to your HTML code as shown below:

<input type="button" value="click me" onclick="performAction();"/>

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

Incorporate npm libraries into vanilla JavaScript for HTML pages

Attempting to incorporate an npm package into plain JS/HTML served using Python and Flask. <script type="module"> import { configureChains, createClient } from "./node_modules/@wagmi/core"; import { bsc } from "./nod ...

Error: Koa.js framework is unable to find the "users" relation in the Sequelize database

I am currently facing an issue while attempting to establish a relationship between two tables, 'user' and 'accessToken'. The error message I am encountering is hindering the process. Below are the models in question:- User model:- ...

The REST API endpoint links for Timestamp are displaying a 404 error message indicating they cannot be

After recently diving into backend development, I ran some tests locally using Postman and localhost which seemed to work perfectly. However, upon uploading my code to GitHub, I encountered a 404 error when clicking on the API endpoint hyperlinks from inde ...

Is there a way to determine the items that will be displayed on this page by clicking a link from a different page?

First Page: Whenever a link is clicked, it will redirect to the second page where only the relevant item will be displayed <ul class="portfolio-filters list-inline"> <li ><a href="page2.html/#webdesign-filter">Web ...

Achieving the Date format in electron with JavaScript

Is there a way to determine the date format currently being used on the device? For example, if I call a specific function, could it provide me with the current format? var dateFormat = getDateFormat(); console.log(dateFormat); MM/dd/YYYY Does anyone hav ...

Delay the execution of a function until subscription within RxJS and React's setState

One of the interesting features of RxJS is the function called fromCallback. This function takes a callback as its last parameter and returns an Observable. I am intrigued by the idea of combining this with React's setState function to achieve somethi ...

saving user information with asynchronous HTTP calls

I am encountering an issue while trying to save my form data using AJAX. When I submit the form data in a JavaScript file that calls another PHP file to perform an insertion operation, an error occurs. Here is the code snippet: <button id="submit" cl ...

Is it possible to shift the image within the <canvas> element without having to redraw the entire canvas?

I created a game board and I am trying to implement drag-and-drop functionality for my pieces, which are in .gif format. However, I am struggling with finding a solution that allows me to move the pieces without constantly redrawing the entire board. Cur ...

When there is an absence of data, the jQuery datatable mysteriously van

I have encountered an issue in my Django app where a datatable used in the template disappears if there is missing data in any column or row. The problem occurs when trying to download the data in CSV, Excel, PDF, or copy format. Here is the HTML code snip ...

Having trouble loading the URL into an iframe using angularJS

With AngularJS, I am attempting to dynamically load the URL address "myLink" into an iframe in another HTML file. The data.No variable is obtained from elsewhere and functions correctly (providing the necessary ID for the URL). In the controller - "Transa ...

Setting filters programmatically in Mui X Data Grid

I am currently working with the MUI Data Grid (pro version) and I am looking to implement checkboxes in the sidebar to filter different columns. Consider three columns: * Column Letters: ['a', 'b', 'c', 'd', etc.] * ...

Effortlessly altering values within a dynamic key in Firebase's real-time database

I attempted to redefine the value as "pretend" using the code snippet below, but unfortunately it did not succeed. dataBase.ref().orderByChild('en_word').equalTo('pretend').set({ en_word: 'Pretend' }) ...

Creating code that is easily testable for a unique test scenario

My function, readFile(path, callback), is asynchronous. The first time it reads a file, it retrieves the content from the file system and saves it in memory. For subsequent reads of the same file, the function simply returns the cached content from memor ...

The function ajax does not recognize response.forEach as a valid function

When I try to use ajax for fetching data from MySQL using PHP and JavaScript, I encounter a function error stating "response.forEach is not a function". Despite looking through various posts on this issue, none of the suggested solutions have been able to ...

Error: The function $(...).jqGrid is not defined for caption: 'Array-Based Student List Loading'

Encountered an error when trying to load the Index view. I am attempting to implement JQGrid using the jQuery grid plugin. I have included several JS files and CSS for JQGrid in the view, but I am unable to create the grid using the plugin. I am using ver ...

What are the steps for utilizing the Object.entries(...) method along with .forEach and .every

Using a constant queryModifier = {price: "lessThan", weight: "greaterThan"}, I am filtering a list. const queryKeys = keys: { price: '1000', weight: '1000' } const list = [ { // object data here }, { // o ...

Guide on implementing ng-repeat within a nested JSON structure in your Ionic app

Struggling with implementing ng-repeat in a nested json object. { "title": "Important message 01", "img": "any url image here", "authorPhoto": "http://lorempixel.com/40/40/people/4/", "author": "John Doe", "datePos ...

Can someone guide me on how to display only the most recent form submission in a form using React and JavaScript? Appreciate your help

Currently, I'm facing a challenge with displaying the latest form submission below a form on my page. Instead of showing all form submissions, I only want to display the most recent one. I'm seeking advice on how best to tackle this issue. If it ...

The submit option fails to appear on the screen in the JsonForm library

I've been using the JsonForm library ( https://github.com/jsonform/jsonform ) to define a form in HTML. I have set up the schema and form of the JsonForm structure, but for some reason, the "onSubmit" function that should enable the send button is not ...

Saving Information from an HTML Form Input?

I am currently working on a form that collects information about employees including their name, age, position, and details. When the "Add Record" button is pressed, this information should be added to a designated div. Although I have set up the Object C ...