Any reason why this JavaScript function isn't running? No errors appearing in the console

There seems to be a problem with this function:

function addInvoiceItemValue(name,pkwiu,netto,unit,qty,vat) {

if(vat == '23') v23 = " selected='selected'";
if(vat == '22') v22 = " selected='selected'";
if(vat == '8') v8 = " selected='selected'";
if(vat == '7') v7 = " selected='selected'";
if(vat == '5') v5 = " selected='selected'";
if(vat == '3') v3 = " selected='selected'";
if(vat == '0') v0 = " selected='selected'";
if(vat == 'zw') vzw = " selected='selected'";

var vatSelect = "<option value='23'"+v23+">23%</option><option value='22'"+v22+">22%</option><option value='8'"+v8+">8%</option><option value='7'"+v7+">7%</option><option value='5'"+v5+">5%</option><option value='3'"+v3+">3%</option><option value='0'"+v0+">0%</option><option value='zw'"+vzw+">zw.</option>";
var row = "<tr id='item" + itemID + "'><td><input size='30' maxlength='300' id='ii-name-" + itemID + "' name='ii-name-" + itemID + "' value='" + name + "'></td>";
row += "<td><input size='6'  maxlength='50' id='ii-pkwiu-" + itemID + "' name='ii-pkwiu-" + itemID + "' value='"+pkwiu+"'></td>";
row += "<td><input size='6'  maxlength='16' id='ii-netto-" + itemID + "' name='ii-netto-" + itemID + "' value='"+netto+"'></td>";
row += "<td><input size='5'  maxlength='128' id='ii-unit-" + itemID + "' name='ii-unit-" + itemID + "' value='"+unit+"'></td>";
row += "<td><input size='5'  maxlength='6' id='ii-qty-" + itemID + "' name='ii-qty-" + itemID + "' value='"+qty+"'></td>";
row += "<td><select id='ii-vat-" + itemID + "' name='ii-vat-" + itemID + "'>" + vatSelect + "</select></td>";
row += "<td><a onclick='delInvoiceItem(\"item" + itemID + "\")'><b>-</b> Usuń</a></td></tr>";

$('#invoiceItems tr:last').after(row);

itemID++;
}

For example, you can use the function as follows:

addInvoiceItemValue('yyy','','676.76','','1','23');
addInvoiceItemValue('fgh','','777.00','','1','8');

On the other hand, here is a fully functional function:

function addInvoiceItem() {

var vatSelect = "<option value='23'>23%</option><option value='22'>22%</option><option value='8'>8%</option><option value='7'>7%</option><option value='5'>5%</option><option value='3'>3%</option><option value='0'>0%</option><option value='zw'>zw.</option>";
var row = "<tr id='item" + itemID + "'><td><input size='30' maxlength='300' id='ii-name-" + itemID + "' name='ii-name-" + itemID + "' value=''></td>";
row += "<td><input size='6'  maxlength='50' id='ii-pkwiu-" + itemID + "' name='ii-pkwiu-" + itemID + "' value=''></td>";
row += "<td><input size='6'  maxlength='16' id='ii-netto-" + itemID + "' name='ii-netto-" + itemID + "' value='0'></td>";
row += "<td><input size='5'  maxlength='128' id='ii-unit-" + itemID + "' name='ii-unit-" + itemID + "' value=''></td>";
row += "<td><input size='5'  maxlength='6' id='ii-qty-" + itemID + "' name='ii-qty-" + itemID + "' value='1'></td>";
row += "<td><select id='ii-vat-" + itemID + "' name='ii-vat-" + itemID + "'>" + vatSelect + "</select></td>";
row += "<td><a onclick='delInvoiceItem(\"item" + itemID + "\")'><b>-</b> Usuń</a></td></tr>";

$('#invoiceItems tr:last').after(row);

itemID++;
}
javascript

Answer №1

Not all code paths define the variables v23, v22, v8, v7, v5, v3, v0, vzw, and itemdID.

This lack of definition results in script failure.

It is recommended to modify your function as follows:

function addInvoiceItemValue(name,pkwiu,netto,unit,qty,vat) {
    var vats = ['23','22','8','7','5','3','0','zw'];

    var vatSelect = '';
    for (var i = 0; i < vats.length; i++)
    {
        vatSelect += '<option value="'+vats[i]+'"';
        if (vat == vats[i])
            vatSelect += ' selected="selected"';
        vatSelect += '>'+vats[i] + '%</option>';
    }

    var row = "<tr id='item" + itemID + "'><td><input size='30' maxlength='300' id='ii-name-" + itemID + "' name='ii-name-" + itemID + "' value='" + name + "'></td>";
    row += "<td><input size='6'  maxlength='50' id='ii-pkwiu-" + itemID + "' name='ii-pkwiu-" + itemID + "' value='"+pkwiu+"'></td>";
    row += "<td><input size='6'  maxlength='16' id='ii-netto-" + itemID + "' name='ii-netto-" + itemID + "' value='"+netto+"'></td>";
    row += "<td><input size='5'  maxlength='128' id='ii-unit-" + itemID + "' name='ii-unit-" + itemID + "' value='"+unit+"'></td>";
    row += "<td><input size='5'  maxlength='6' id='ii-qty-" + itemID + "' name='ii-qty-" + itemID + "' value='"+qty+"'></td>";
    row += "<td><select id='ii-vat-" + itemID + "' name='ii-vat-" + itemID + "'>" + vatSelect + "</select></td>";
    row += "<td><a onclick='delInvoiceItem(\"item" + itemID + "\")'><b>-</b> Remove</a></td></tr>";

    $('#invoiceItems tr:last').after(row);

    itemID++;
}

Keep in mind that you also need to define the variable `itemID`.

Answer №2

When is it supposed to run?

Although considered poor coding practice, you can try testing it with this:

<a href='#' onClick="javascript: executeFunction('value');" > Click Me </a>

If you click and nothing happens, there may be an issue with your function. If it works when you click, the function was never actually called.

Answer №3

Check your selector for better results.

$('#invoiceItems tr:last').after(row);

Consider adding it in a more straightforward location. Create another div...

Then utilize the selector $('#result');

If your selector is incorrect, it will fail to execute without throwing an error because it was never triggered. That seems to be the root of the issue.

Try this for me:

$('#invoiceItems tr:last').each(alert('exist???'));

If the alert doesn't show up, chances are your selector isn't functioning properly. (For each element that meets the condition, display an alert)

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 matter concerning the intricacies of Rails, JQuery, Prototype, and RJS

I am exploring the integration of Jquery and ajax in rails 3.0.7, but I'm unclear on the current landscape regarding their usage together. There seems to be an abundance of hacks, plugins, and scripts available for utilizing JQuery. So: Is there an ...

javascriptjqueryruby-on-railsajaxprototypejs

Parent element with 'overflow: hidden' in CSS is causing child styles to be cropped out

.util-truncate { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a { text-decoration: none; } a:focus { box-shadow: 0 0 0 3px blue; text-decoration: underline; } a:focus-visible { outline: 0; } <div ...

javascripthtmlcss

An HTML form featuring various submit buttons for accomplishing different tasks

After searching extensively, I have come across solutions that are similar but not quite right for my specific situation. Here's what currently works for me: <script type="text/javascript"> function performTask1(a, b) { window.open('intern ...

javascripthtmlforms

Is it possible to modify the inner text of the body element without changing the surrounding HTML tags?

In my script, I have the following line : var ReplacingScope = document.querySelector( "body" ); let Regexp = new RegExp("fdp", 'gi'); ReplacingScope.innerText = ReplacingScope.innerText.replace( Regexp,"pdf"); While this successfully replaces ...

javascripthtml

A guide on adding specific rows together in a list

I'm working with a grid that contains various items and I want to calculate the total of the val_itemservico column only for the selected rows, not all of them. How can I achieve this functionality? When the user clicks on the "Calculate" button, I n ...

javascriptpythonhtmldjango

Filter array to only include the most recent items with unique names (javascript)

I'm trying to retrieve the most recent result for each unique name using javascript. Is there a straightforward way to accomplish this in javascript? This question was inspired by a similar SQL post found here: Get Latest Rates For Each Distinct Rate ...

javascriptangulartypescript

Can process.env.NODE_ENV be found within Azure App Service?

I am integrating NodeJS with my Angular application using ExpressJS. I came across an npm package called norobot that I want to install in order to utilize the process object. I need guidance on how and where to set the NODE_ENV in an App Service on Micro ...

javascriptnode.jsazureexpressazure-web-app-service

Effortlessly sending multiple values from text fields using jQuery

i am using jQuery to fetch all values from text fields with the same field name. $('input[name^="StudentName"]').each(function() { StudentName += $(this).val(); alert(StudentName); }); when I alert, all the values are displayed as one s ...

javascriptjquery

Duplicate numerous Td elements

I am trying to manipulate a table with 3 columns and 6 rows by copying the contents of certain cells into a newly created column, inserting them in the middle of the table. Here is the desired outcome: https://i.sstatic.net/RVTfV.png This is the approach ...

javascriptjqueryhtml

Using jQuery slider and sortable in combination

I have been experimenting with combining jQuery slider and jQuery sortable on the same HTML page. Check out this jsfiddle solution by ostapische Initially, the slider (which highlights items in the list) works perfectly when the page is first loaded. Howe ...

javascriptjquery

Material UI React Autocomplete Component

I'm currently working on integrating an Autocomplete component using the Material UI library. However, I've encountered a challenge - I'm unsure of how to properly pass the value and onChange functions, especially since I have a custom Text ...

javascriptreactjstypescriptautocompletematerial-ui

When working with Angular1+ ES6 and using controller as a class, the utilization of Dependency Injections may be ambiguous within controller functions

I recently started using ES6 class for defining my controller, and here is the syntax I am using: export class SearchBarController { constructor($log) { 'ngInject'; $log.debug("Hello"); } textTyped($log){ $ ...

javascriptangularjsdependency-injectionecmascript-6

The source 'http://localhost:3000' is not authorized to access the Twitter API

I am working on a web application that utilizes the Twitter API REST. On one of my pages, I have a list of Twitter accounts and a button to add a new account. When this button is clicked, it triggers a function in the Angular controller: // Function to ...

javascriptangularjsnode.jswebtwitter

Choose various div elements and modify their background colors

I have a PHP loop where I am creating multiple divs dynamically. Here is the code snippet: <?php for ($i=0; $i<=9; $i++) { for ($j=0; $j<=9; $j++) { echo "<div class=\"bg\" id=\"aaa".$i."&bsol ...

phpjavascriptjquerycss

DaisyUI special design for managing inactive buttons

I have encountered an issue while creating a reddit Single Sign-On (SSO) button. The problem I'm facing is that the custom theme I designed for the Reddit button appears secondary-grey when it's disabled. Below is my theme configuration in the t ...

javascripthtmlreactjstailwind-cssdaisyui

remove duplicate div using jquery

I inserted several layers dynamically in the following manner <div><p class="locid">2<p></div> <div><p class="locid">1<p></div> <div><p class="locid">2<p></div> <div><p class ...

javascriptjqueryduplicateshide

What is the process for manually altering environment variables in Angular post-build?

In order to avoid having to rebuild my app every time I need to deploy it on a different server with a different API address, I currently store the API base address in my environment class which gets included in the bundles after build. However, this makes ...

javascriptangulartypescript

Navigating the process of transferring a function to a functional component within React

Hey there, I'm fairly new to using React and TypeScript and I am facing a small issue with moving a function from the file App.tsx to a functional component called WordAddingForm.tsx. Any help would be greatly appreciated! Let's start with my Ap ...

javascriptreactjstypescriptreact-hookscomponents

Determine the execution time of a Python script

I have developed a series of Python scripts to run as the backend of my application. Users are required to upload a file using the provided webpage, where they can track the progress through a displayed progress bar. The file is broken down into frames, ob ...

javascriptphppythonhtmlajax

Struggling to delete elements from observable array within Knockoutjs framework

I am attempting to use knockoutjs to remove a user from an observable array called users. It seems like my viewModel may not be working correctly because it is within a document.ready function. Here is some context about the code below: My application fet ...

javascriptjqueryknockout.js