Restricting character count when displaying output in JavaScript

Is there a way to restrict the number of characters displayed on a label using a JavaScript file? I am encountering an issue with a specific part of the code that is triggered by a button click and is responsible for printing the contents from a preview box. Although everything else is functioning correctly, I can't seem to control the length of the title I want to print. Whenever I try to limit the number of characters, I receive the error message: TypeError: title.substring is not a function title = title.substring(0, 11); Any suggestions?

// This code snippet allows temporary SLU's to be printed from the main page in alphabetical order
$("#barcodesku").live('click', function(){
var title=[];
var sku=[];
var first = "";
var second = "";
var indexGlobal = 0;

    $('#acctRecords tbody tr').each(function()
{
sku.push($(this).find('#tableSKU').html());
title.push ($(this).find('#tableTitle').html());

                
        });  //end of acctRecords tbody function
    
    // Print the bar codes
title = title.substring(0,16);
var x=0;
for (x=0;x<sku.length;x++){


                        first += '$("#'+indexGlobal+'").barcode("'+sku[x]+'", "codabar",{barHeight:40, fontSize:30, output:"bmp"});';
second += '<div class="wrapper"><img src="../images/temp.jpg" /><div id="'+indexGlobal+
'"></div><div class="fullSKU">&nbsp &nbsp &nbsp '+sku[x]+'</div><br/><div class="title", {title.substring(0,16)}; >'+title[x]+' </div></div><br/><br/>';
indexGlobal++;

 
 

}
    var barcode =  window.open('','BarcodeWindow','width=200');
var html = '<html><head><title>Barcode</title><style type="text/css">'+
   '.page-break{display:block; page-break-before:always; }'+
'body{width: 2in;}'+
'.wrapper{height: 1in;margin-left:10px;margin-top:5px;margin-right:5px;}'+
'.fullSKU{float: left;}'+
'.shortSKU{float: right;font-size:25px;font-weight:bold;}'+
'.title{float: left;}'+
'</style><script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script><script type="text/javascript" src="../barcode/jquery-barcode.js"></script><script>$(document).ready(function() {'+first+'window.print();window.close();});</script></head><body>'+second+'</body></html>';
barcode.document.open();
barcode.document.write(html);
barcode.document.close();

}); // end of click function

Answer №1

Upon review of your code, it appears that the 'title' variable is an array containing multiple titles. To address this, you should implement the following solution:

for (let j = 0; j < title.length; j++) {
    title[j] = title[j].slice(0, 10);
}

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

Can someone guide me on the proper implementation of the 'useEffect' hook in React version 18?

I'm currently working on a project following a YouTube tutorial that uses React 17, while I'm using React 18. Everything has been going smoothly so far, but I've hit a roadblock with formatting animated text. The specific task I'm stuck ...

Utilize the Twitter Bootstrap modal feature to play autoplaying Youtube videos that automatically pause when

Similar Question: How do I halt a video using Javascript on Youtube? I am curious about how I can utilize the modal feature in Twitter Bootstrap to automatically play a Youtube video, and when a user clicks the "close" button, it will cease the video ...

Problem with updating an Html.TextBoxFor based on the value of another one

I have been trying to implement a basic jQuery functionality that involves changing the text in one textbox to be half of the numeric value entered in another textbox. Below is the script I am using: <script> $(document).ready(function () { $(& ...

Triggering a pop-up window to appear without user interaction on the specified date within the function

I am looking to automatically trigger a pop-up window when my website loads after a specific date that I define within a function. How can I set up the date function for this task? I want the pop-up window to appear automatically on 27/07/2011, and every ...

Exploring the Implementation of Multiple Form Validations in SharePoint using PreSaveAction

My knowledge of Javascript is limited to what I can gather from online resources. Currently, I'm facing a challenge with a SharePoint form where I need to set up specific validations that trigger when a user hits the "Save" button. The validations I& ...

Guidance on editing list items individually using jQuery from separate input fields

Working with li presents some challenges for me. On my webpage, I have an input field that dynamically adds values to a list. However, the function to edit these values is not working properly. After editing an li element, it deletes all classes and span ...

AngularJS: The delay in updating variable bindings following a REST API call

When utilizing a REST service, I wanted to implement a variable to show whether the service is currently loading or not. Controller $scope.loading = true; $http.get('/Something'). success(function(data, status, headers, config) ...

What is the process for removing globally declared types in TypeScript definitions?

There are numerous libraries that cater to various platforms such as the web, Node servers, and mobile apps like React Native. This means they can be integrated using <script /> tags, require() calls, or the modern import keyword, particularly with t ...

MUI Error: Unable to locate module - "Error: Unable to resolve 'moment' module"

Encountering numerous errors when attempting to utilize the date-picker feature from mui-x. Issue: Module not found - Error: Can't resolve 'moment' Problem locating '@mui/x-date-pickers/LocalizationProvider' Error: Module not fou ...

Rails: Utilizing AJAX to dynamically populate Bootstrap dropdown menus

In the setup I have, there is a dropdown responsible for displaying notifications. <li class="notifications dropdown"> <a class="dropdown-toggle" id="dLabel" role="button" data-remote="true" data-toggle="dropdown" data-target="#" href="/notifi ...

What is the best way to display every comment and response using console.log()?

Currently, I am developing a commenting system where users can leave comments and reply to existing comments. In the MySQL database image Both images depict the same scenario. In my highlighted text in yellow, it should read comments[0] instead of comment ...

Is there a faster way to create a typescript constructor that uses named parameters?

import { Model } from "../../../lib/db/Model"; export enum EUserRole { admin, teacher, user, } export class UserModel extends Model { name: string; phoneNo: number; role: EUserRole; createdAt: Date; constructor({ name, p ...

Transferring a CSV file to the server from a React application using multi-part form

In order to post a CSV file to an API using React, I have attempted to do so in multipart form. While many tutorials and websites suggest using the fetch() method for sending files to a server, I am encountering some challenges. The issue lies with my RES ...

Add a new row to the table when a dropdown option is selected, and remove the row when deleted. Ensure that the row is only added

Here is my specific requirement: I need a table with a default row containing a dropdown menu in the first column. When an option is selected from the dropdown, a new table row should be added with the same content as the main row and a delete button for ...

Update the WooCommerce shopping cart page automatically upon product removal

After trying to solve the issue of refreshing the cart page in WooCommerce when a product is removed, I came across this helpful question on Stack Overflow: Refresh the page after product remove from cart Woocommerce. Following the provided code snippet th ...

Chat lines in Chrome displaying double entries - troubleshooting needed

I developed a chat plugin for my website with a simple HTML structure: <div id="div_chat"> <ul id="ul_chat"> </ul> </div> <div id="div_inputchatline"> <input type="text" id="input_chatline" name="input_chatline" val ...

Sending multiple ajax requests with identical data

I have been trying to send multiple requests to the same URL. The goal is to ban all the users that are included in the 'users' array by sending individual POST requests for each user. However, I am facing an issue where I keep getting the same d ...

Issues with the .change(function() JavaScript in Internet Explorer versions less than 9

I'm experiencing issues with this script in Internet Explorer versions below 9. Can someone please help me identify what is wrong with my script? Thank you. IE7 and IE8 are showing the following error: SCRIPT87: Invalid argument. Found ...

Styling the active selection in nav class with bold attribute in Bootstrap/AngularJs

How can I apply the bold attribute to the currently selected nav bar item? <ul class="nav"> <li role="presentation" ng-repeate="item in items" ng-class="{'active':navLink == item.header}"> </li> &l ...

Even though `return false` is called, the line of code is still being executed

I am looking for a way to validate user input details before submitting them to the database. I have multiple tabs in a form and one common save button that triggers a save function when clicked, as shown below; $scope.saveFn = function () { $("#activ ...