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

Find and extract elements from a nested array within an object inside another object within an array of objects

I am working with an array of objects that looks like this: [ { likes: [], _id: 5f254e21fd3e040640de38b2, content: 'try this', author: { posts: [Array], comments: [], images: [], followers: [Array], ...

javascriptarraysreactjsgraphql

Choosing a radio button within a modal window

When a button is clicked, a modal pops up with two radio buttons that have the same input name "radioButtons". The first radio button is checked by default: <input class="form-checks" type="radio" name="radioButtons" value="1" checked="checked"> T ...

jqueryradio-button

The CSRF token is mysteriously altering in places it should remain unchanged

Implementing the code below to prevent CSRF vulnerability if (!isset($_POST['_token'])) { $_SESSION['_token'] = bin2hex(random_bytes(20)); } I then use the token in hidden inputs named _token. In my main.js file, I include the foll ...

javascriptphpajax

What consequences could occur in HTML if the main tag is not properly enclosed within the body tag?

Just starting out. While working with HTML, I experimented with placing the main tag outside of the body tag instead of nesting it inside as recommended by HTML5 standards. To my eye, both versions looked identical when I viewed the HTML file side by sid ...

html

Struggling with retrieving JSON values from jQuery $.ajax to PHP communication

After spending hours browsing SO and trying out various proposed solutions for similar problems, as well as reading the official jQuery Docs, I am still unable to get the following code to work. Any help or hints on what I might be doing wrong would be gre ...

phpjqueryjsonajaxpost

Ways to permit https://* within a content security policy (CSP) configuration

I'm currently incorporating CSP into my website but encountering an issue with the img-src header. I'm using NodeJS and Express to develop the site for my Discord Bot, and I want to revamp it but I've hit a roadblock. ====== This is the co ...

javascriptnode.jsexpresscontent-security-policy

Creating Three-Dimensional Faces in THREE.BufferGeometry

I have programmatically created a basic mesh structure: var CreateSimpleMesh = new function () { var xy = [], maxX = 7, maxY = 10, river = [[0, 5], [0, 4], [1, 3], [2, 2], [3, 2], [4, 1], [5, 1], [6, 0]], grassGeometry ...

javascriptthree.jsvertexbuffer-geometry

Progressively updating elements one by one leads to updates

I am currently working on a webpage where one element ('.item--itemprice') updates its text through a function that I don't want to modify. My goal is to have another element ('.header--itemprice') update its text to match the firs ...

javascriptjquery

How can you retrieve the current user in express.js when incorporating socket.io?

I have a web app using the express framework and socket.io for real-time chat. I am trying to get the current user's username and create a room with them in it, but I am struggling to retrieve the user info when socket.on('connection') is ca ...

javascriptnode.jssocketsexpresssocket.io

Material-inspired Design Device Compatible DIV slide with JS, JQuery, and CSS

My goal is to achieve something similar to this: Desired Live Website I am looking for a feature where clicking on the div will slide in content from the right, load an external page inside it, and close when prompted. The slider div should be device c ...

javascriptjquerycssfluid-layoutmaterial-design

How come despite installing node 10.1.0, the system is showing the installed version as 5.6.0?

After I downloaded the NPM Windows installer from this link: https://nodejs.org/it/, I made sure to download and install the 10.1.0 version. However, when I checked my console using the command node -v, I was surprised by the following output: C:\U ...

javascriptnode.jsnpm

Leveraging Angular and HTML to efficiently transfer the selected dropdown value to a TypeScript method upon the user's button click

I am experiencing difficulty accessing the .value and .id properties in {{selectItem}} in order to send them back to the typescript for an HTTP post at a later time. Although there are no specific errors, I have encountered exceptions and have tried search ...

htmlangulartypescriptcollectionsdata-binding

Is it possible for images to align vertically instead of horizontally in IE?

Encountering an issue with image alignment in Internet Explorer - they are aligning vertically instead of horizontally, while functioning correctly in all other browsers. Moreover, in IE8 and 7, the images are not being displayed at all. Is there a workaro ...

htmlcssimagealignment

JQuery is failing to properly return the string containing special characters like apostrophes

Storing the name "Uncle Bob's Organic" in the data-Iname attribute caused a retrieval issue, as it only retrieved up to "Uncle Bob". Here is the process used for retrieving the value from the data-Iname: var itemName = $(this).attr("data-Iname"); T ...

javascriptjquery

The position of a jQuery element gets reset when both the show and stop animations are used

When I use jQuery's .position() to place an element, everything works fine. But as soon as I display an animation and then cancel it with an ajax call, the position of the element resets. function displayMessage(msg) { var $messageEl = $('#u ...

javascriptcssjquery-uijquery

Error encountered: Unexpected token when defining inline style in React

When attempting to prevent scrolling on the page by using style='overflow-y: auto;': render() { return ( <div style={{overflow-y: auto}}> <div>{this.props.title}</div> <div>{this.props.children}& ...

javascriptcssreactjsreact-bootstrap

Seeking help on modfiying div content with AJAX - any tips for showing navigation using hash or anchor?

Looking to create a dynamic page that updates content within a div asynchronously while also providing users with direct access to specific content within the div by using anchors (e.g. www.website.co.uk/#page1). I've successfully implemented the upd ...

javascriptjqueryhtmlajax

Can an image be allowed to overflow outside of a div without changing the div's size?

Starting Point I am in the process of designing a layout with Bootstrap 4. Here's a rough representation of what I am aiming for: https://i.sstatic.net/7QTpk.jpg And here is the basic structure: <div class="row"> <div class="col-12 c ...

htmlcsstwitter-bootstrapbootstrap-4

PHP Ajax not updating variable as expected

Apologies for the repetitive questions, but I have tried numerous solutions and cannot seem to figure out why this particular one is not working. I am invoking ajax through a click function, but I am unable to retrieve the jList value and update the variab ...

javascriptphpjqueryajax

Is it possible to convert a .gif file into a jpeg image format for mobile display on my Gatsby website?

I'm looking to convert a .gif file into a mobile.png image for my Gatsby site, but I'm struggling to find the right resources. Does anyone have suggestions on how I can achieve this? Here is the frame: ...

javascriptcssreactjsgatsby