Guide on transferring three js variable to an HTML label element

For my project, I am looking to pass three js values to the label of a div. The desired output is:

stWay:             stProposer:           stTime:
hello              John                  2017-09-07

I have successfully programmed a button to make div1 appear, but I am facing difficulties in retrieving and displaying the values from JavaScript. The values 'hello', 'John', '2017-09-07' are not appearing as expected.

To maintain the same format, I decided to use CSS for labeling instead of input elements.

Below is my current JavaScript code:

<script>
$(document).ready(function()
 {
   ......//click button to make div1 display block
   var reqStWay = "hello";
   var reqPeople = "John";
   var reqTime = "2017-09-07";
   $("#div1").css('display','block');
   $('#lblId').val(reqStWay);
   $('#lblId').val()=$('#lblId').val().appendto("         ");
   $('#lblId').val()=$('#lblId').val().appendto(reqPeople);
   $('#lblId').val()=$('#lblId').val().appendto("         ");
   $('#lblId').val()=$('#lblId').val().appendto(reqTime);
 }
</script>

And here is my HTML code:

<style>
.DIV1 label{.........}
</style>
<div id="div1" class="DIV1">
<label>stWay:&nbsp;&nbsp;&nbsp;&nbsp;stProposer:&nbsp;&nbsp;&nbsp;&nbsp;stTime:</label><br />
<label id="lblId"></label><br />
</div>

I also tried using the following line of code:

 $('#lblId').html(reqStWay"&nbsp;&nbsp;&nbsp;&nbsp;"reqPeople"  &nbsp;&nbsp;&nbsp;&nbsp; "reqTime);

Unfortunately, this attempt failed too. Can anyone provide assistance?

javascriptjqueryhtmlcss

Answer №1

There are several ways to accomplish this task. By making some adjustments to your code, you can achieve the desired outcome like so:

$('#lblId').html(reqStWay + "&nbsp;&nbsp;&nbsp;&nbsp;" + reqPeople + "  &nbsp;&nbsp;&nbsp;&nbsp;" + reqTime);

An alternative, cleaner approach to achieving the same result would be:

$('#lblId').append(reqStWay)
           .append("&nbsp;&nbsp;&nbsp;&nbsp;")
           .append(reqPeople)
           .append("&nbsp;&nbsp;&nbsp;&nbsp;")
           .append(reqTime);

For an even more concise solution, consider the following:

var reqStWay = "hello";
var reqPeople = "John";
var reqTime = "2017-09-07";

$('#lblId').find('tbody').append('<tr><td>'+reqStWay+'</td><td>'+reqPeople+'</td><td>'+reqTime+'</td></tr>');
#lblId td {
  padding:0 2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="lblId">
  <thead>
    <tr>
      <th>stWay</th>
      <th>stProsper</th>
      <th>stTime</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Answer №2

  $('#lblId').html(reqStWay + "&nbsp;&nbsp;&nbsp;&nbsp;" + reqPeople + "&nbsp;&nbsp;&nbsp;&nbsp; " + reqTime);

The functionality of this code is working properly. It is important to use the + signs in order to concatenate strings, which were missing in the initial implementation.

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

The overflow:hidden property does not seem to be effective for controlling the display of the

I'm attempting to construct a carousel using a ul element where the li items act as blocks within the ul container. However, I have encountered difficulties with two different approaches where the overflow property does not behave as expected. Approa ...

htmlcssoverflowhtml-lists

React Nested Grid with Material-UI

https://i.stack.imgur.com/toxDA.jpg I am striving to replicate the layout demonstrated in the image below So far, I have the following code snippet: <Grid container justify=“space-between”> <Grid container item> <Grid ite ...

cssreactjsgridmui

Creating a CSS section that expands with a minimum height of 100% and perfectly centers its content vertically

Seeking an elegant solution for having sections with a minimum height of 100% (window height). The div should expand to fit the content if it exceeds 100%, and vertically center the content within the div if it is smaller. I have managed to find a simple ...

htmlcssvertical-alignmentexpandable

The script fails to function properly when it is accessed from a different webpage

I have been working on a website using JQuery and JQuery Mobile. As I test the pages one by one, I created a page where users can input data and get autocomplete suggestions from a PHP/MySQL database. The functionality works perfectly as intended. However ...

jqueryjquery-mobile

How to Send a Multi-part Message Using AT Commands and PDU Mode in Node.js

I am trying to send a multipart message using AT commands. Single parts work fine, as do special characters. However, when the message exceeds 160 characters, it shows as sent but nothing is received. const async sendSMS(msisdn, message) { message += ...

javascriptnode.jsat-commandpdu

Looking to implement a condition that prevents the echoing of HTML code when a certain template ID is selected?

Struggling with inherited PHP MVC code for a website, I encounter an issue on a specific page where unwanted code is echoed out. To prevent this, I aim to skip the echoing when a specific templateID (which I set as default) is selected. However, I'm u ...

phphtmlsql

How can I add content to the body of a modal in Bootstrap 3?

My application has a button that, when clicked, is supposed to trigger a modal popup containing some data. I want the data in the modal to come from another application via a PHP file accessed through a URL. How can this be achieved? <?php echo '& ...

javascriptphpjqueryhtmltwitter-bootstrap

Using MIPS Assembly Language: Displaying Register Content on Screen

I'm working on replicating a simple form of debugging in MIPS similar to javascript. I am wondering how I can achieve the equivalent of this ($t0 represents a javascript variable here): console.log($t0); In simpler terms, I am looking for the metho ...

javascriptdebuggingmips

In search of a particular class upon clicking

Two div containers are present: <!-- button1 --> <div class="voted"> <span>name</span> <div class="button">Vote</div> </div> <!-- button2 --> <div class="vote"> <span>name</span&g ...

jquerydomelementthis

Learn how to effectively share an image using the Math.random function

Is there a way to display a random number of images on a webpage using JavaScript? Let's say we want to show X number of images, where X is a randomly generated number. For the sake of this example, let's set X to be 10. <input class="randomb ...

javascripthtml

Sometimes, the page-wide background in Internet Explorer doesn't load properly

Currently, I am working on a website that uses an image as the background for the entire site. Everything seems to be running smoothly in Firefox and Safari, but Internet Explorer is giving me some trouble. Sometimes the image fails to load at all, other t ...

htmlcss

Having issues with the POST method in node.js and express when connecting to a MySQL database

My GET method is functioning perfectly I have a database called stage4 and I am attempting to insert values into it from a frontend page The connection is established, I'm using Postman to test it first, but it keeps returning a "404 error" which is ...

javascriptmysqlnode.jsapiexpress

The submit button is unable to initiate the ajax function

I encountered an issue with my code while attempting to separate my form function into a different PHP file and utilize an Ajax function to call the form based on the IDs. However, after separating the form function, the submit button no longer triggers th ...

javascriptphpjqueryajax

Easily Update Your Div Content by Simply Clicking a Single Link/Button

I am in need of assistance here. My goal is to display dynamic content within a div. Below you will find the code I currently have: <script type="text/javascript"><!-- function AlterContentInContainer(id, content) { var container = documen ...

javascriptjqueryhtmlcss

Include a basic downward-pointing arrow graphic to enhance the drop-down navigation menus

I am working on a website that has drop-down menu headings styled with CSS. I am looking to enhance these certain menu headers by adding small down-facing arrows indicating they are clickable. Does anyone have any suggestions on how I can achieve this? ...

htmlcssuser-interface

Displaying Photo on Webpage using Bearer Authorization Token in JavaScript

In my JavaScript code, I am currently loading an image using the following method: var img = new Image(); img.onload = function () { .. }; img.src = src; However, I have recently realized that I need to secure the images on my server side with OAuth 2, j ...

javascriptangularjsoauth-2.0asp.net-web-api2

What is the Best Way to Create a Form Inside a Box?

Hello there! I am trying to create a form underneath the box labeled "New Referral," but I'm having trouble figuring it out. I would like to include sections for first name, last name, date of birth, phone number, email, and address under the box. Any ...

htmlcss

Is it possible to extract an attribute value from a parent element using ReactJS?

https://i.stack.imgur.com/OXBB7.png Whenever I select a particular button, my goal is to capture the {country} prop that is linked to it. I attempted the following approach import React, { useState, useEffect } from 'react' import axios from &ap ...

javascriptreactjsevent-handlingreact-props

Encountering difficulties with displaying error messages on the Material UI datepicker

I am currently utilizing React Material UI There is a need to display an error based on certain conditions that will be calculated on the backend. Although I have implemented Material UI date picker, I am facing issues with displaying errors. import * as ...

javascriptmaterial-ui

The Javascript regex allows for the presence of positive and negative numbers, with the option of a single minus symbol

oninput="this.value = this.value.replace(/[^-0-9.]/g, '') This code snippet is utilized in my current project. However, there seems to be an issue where the input can contain more than one minus sign, as shown here: ---23 To address this p ...

javascriptregex