html - JavaScript how to remove hard coded values on 'click' function - Stack Overflow

admin管理员组

文章数量:1336568

Hello world would be grateful for any help i have some redundancy code issues, everything works fine but i had to repeat the same code about 100 times for my unique identifier.
I have a add button that gets assigned a unique identifier for the example below my add button id is addbtn3 so this finds the JavaScript with addbtn3 and does stuff.
I would really like when the addbtn3 is clicked the JavaScript is generic like:

$("body").on("click", "#addbtn + row", function () { 

and it knows that the row value is three so i don't have it hard coded. any help would be appreciated

 $("body").on("click", "#addbtn3", function () {

  var toolListUpdate = $("#ToolList3");
  var genericDropDownListUpdateOne = $("#GenericDropdownOne3");
  var genericDropDownListUpdateTwo = $("#GenericDropdownTwo3");
  var genericDropDownListUpdateThree = $("#GenericDropdownThree3");
  var genericDropDownListUpdateFour = $("#GenericDropdownFour3");
  var changeNoticeNumberLinkUpdate = $("#changeNoticeNumberLink3");
  var holdLotNumberLinkUpdate = $("#holdLotNumberLink3");
  var hotLotNumberLinkUpdate = $("#hotLotNumberLink3");
  var wITALinkUpdate = $("#wITANumberLink3");
  var commentUpdateSmall = $("#commentSmall3");
  var commentUpdateMedium = $("#commentMedium3");
  var commentUpdateLarge = $("#commentLarge3");
  var fieldid = $("#fieldid3");

  var tBody = $("#tblUpdate3 > #tbodyUpdate3")[0];

  var row = tBody.insertRow(-1);

  var cell = $(row.insertCell(-1));
  cell.html(fieldid.val());

  var cell = $(row.insertCell(-1));
  cell.html(toolListUpdate.val());

  cell = $(row.insertCell(-1));
  cell.html(genericDropDownListUpdateOne.val());

  cell = $(row.insertCell(-1));
  cell.html(genericDropDownListUpdateTwo.val());

  cell = $(row.insertCell(-1));
  cell.html(genericDropDownListUpdateThree.val());

  cell = $(row.insertCell(-1));
  cell.html(genericDropDownListUpdateFour.val());

  cell = $(row.insertCell(-1));
  cell.html(changeNoticeNumberLinkUpdate.val());

  cell = $(row.insertCell(-1));
  cell.html(holdLotNumberLinkUpdate.val());

  cell = $(row.insertCell(-1));
  cell.html(hotLotNumberLinkUpdate.val());

  cell = $(row.insertCell(-1));
  cell.html(wITALinkUpdate.val());

  cell = $(row.insertCell(-1));
  cell.html(commentUpdateSmall.val());

  cell = $(row.insertCell(-1));
  cell.html(commentUpdateMedium.val());

  cell = $(row.insertCell(-1));
  cell.html(commentUpdateLarge.val());

  cell = $(row.insertCell(-1));
  var timestamp = $("<div>@DateTime.Now</div>");
  cell.append(timestamp);

  cell = $(row.insertCell(-1));
  var btnRemove = $("<input />");
  btnRemove.attr("type", "button");
  btnRemove.attr("class", "btn btn-link remove")
  btnRemove.attr("id", "remove")
  btnRemove.attr("style", "font-size: 11px; color:red;")
  btnRemove.val("- Remove");
  cell.append(btnRemove);

  var tBodyUpdate = $("#tblUpdate > #tbodyUpdate")[0];

  var row = tBodyUpdate.insertRow(-1);

  var cell = $(row.insertCell(-1));
  cell.html(fieldid.val());

  var cell = $(row.insertCell(-1));
  cell.html(toolListUpdate.val());

  cell = $(row.insertCell(-1));
  cell.html(genericDropDownListUpdateOne.val());

  cell = $(row.insertCell(-1));
  cell.html(genericDropDownListUpdateTwo.val());

  cell = $(row.insertCell(-1));
  cell.html(genericDropDownListUpdateThree.val());

  cell = $(row.insertCell(-1));
  cell.html(genericDropDownListUpdateFour.val());

  cell = $(row.insertCell(-1));
  cell.html(changeNoticeNumberLinkUpdate.val());

  cell = $(row.insertCell(-1));
  cell.html(holdLotNumberLinkUpdate.val());

  cell = $(row.insertCell(-1));
  cell.html(hotLotNumberLinkUpdate.val());

  cell = $(row.insertCell(-1));
  cell.html(wITALinkUpdate.val());

  cell = $(row.insertCell(-1));
  cell.html(commentUpdateSmall.val());

  cell = $(row.insertCell(-1));
  cell.html(commentUpdateMedium.val());

  cell = $(row.insertCell(-1));
  cell.html(commentUpdateLarge.val());

  cell = $(row.insertCell(-1));
  var timestamp = $("<div>@DateTime.Now</div>");
  cell.append(timestamp);


  toolListUpdate.val("");
  genericDropDownListUpdateOne.val("");
  genericDropDownListUpdateTwo.val("");
  genericDropDownListUpdateThree.val("");
  genericDropDownListUpdateFour.val("");
  changeNoticeNumberLinkUpdate.val("");
  holdLotNumberLinkUpdate.val("");
  hotLotNumberLinkUpdate.val("");
  wITALinkUpdate.val("");
  commentUpdateSmall.val("");
  commentUpdateMedium.val("");
  commentUpdateLarge.val("")

});

Hello world would be grateful for any help i have some redundancy code issues, everything works fine but i had to repeat the same code about 100 times for my unique identifier.
I have a add button that gets assigned a unique identifier for the example below my add button id is addbtn3 so this finds the JavaScript with addbtn3 and does stuff.
I would really like when the addbtn3 is clicked the JavaScript is generic like:

$("body").on("click", "#addbtn + row", function () { 

and it knows that the row value is three so i don't have it hard coded. any help would be appreciated

 $("body").on("click", "#addbtn3", function () {

  var toolListUpdate = $("#ToolList3");
  var genericDropDownListUpdateOne = $("#GenericDropdownOne3");
  var genericDropDownListUpdateTwo = $("#GenericDropdownTwo3");
  var genericDropDownListUpdateThree = $("#GenericDropdownThree3");
  var genericDropDownListUpdateFour = $("#GenericDropdownFour3");
  var changeNoticeNumberLinkUpdate = $("#changeNoticeNumberLink3");
  var holdLotNumberLinkUpdate = $("#holdLotNumberLink3");
  var hotLotNumberLinkUpdate = $("#hotLotNumberLink3");
  var wITALinkUpdate = $("#wITANumberLink3");
  var commentUpdateSmall = $("#commentSmall3");
  var commentUpdateMedium = $("#commentMedium3");
  var commentUpdateLarge = $("#commentLarge3");
  var fieldid = $("#fieldid3");

  var tBody = $("#tblUpdate3 > #tbodyUpdate3")[0];

  var row = tBody.insertRow(-1);

  var cell = $(row.insertCell(-1));
  cell.html(fieldid.val());

  var cell = $(row.insertCell(-1));
  cell.html(toolListUpdate.val());

  cell = $(row.insertCell(-1));
  cell.html(genericDropDownListUpdateOne.val());

  cell = $(row.insertCell(-1));
  cell.html(genericDropDownListUpdateTwo.val());

  cell = $(row.insertCell(-1));
  cell.html(genericDropDownListUpdateThree.val());

  cell = $(row.insertCell(-1));
  cell.html(genericDropDownListUpdateFour.val());

  cell = $(row.insertCell(-1));
  cell.html(changeNoticeNumberLinkUpdate.val());

  cell = $(row.insertCell(-1));
  cell.html(holdLotNumberLinkUpdate.val());

  cell = $(row.insertCell(-1));
  cell.html(hotLotNumberLinkUpdate.val());

  cell = $(row.insertCell(-1));
  cell.html(wITALinkUpdate.val());

  cell = $(row.insertCell(-1));
  cell.html(commentUpdateSmall.val());

  cell = $(row.insertCell(-1));
  cell.html(commentUpdateMedium.val());

  cell = $(row.insertCell(-1));
  cell.html(commentUpdateLarge.val());

  cell = $(row.insertCell(-1));
  var timestamp = $("<div>@DateTime.Now</div>");
  cell.append(timestamp);

  cell = $(row.insertCell(-1));
  var btnRemove = $("<input />");
  btnRemove.attr("type", "button");
  btnRemove.attr("class", "btn btn-link remove")
  btnRemove.attr("id", "remove")
  btnRemove.attr("style", "font-size: 11px; color:red;")
  btnRemove.val("- Remove");
  cell.append(btnRemove);

  var tBodyUpdate = $("#tblUpdate > #tbodyUpdate")[0];

  var row = tBodyUpdate.insertRow(-1);

  var cell = $(row.insertCell(-1));
  cell.html(fieldid.val());

  var cell = $(row.insertCell(-1));
  cell.html(toolListUpdate.val());

  cell = $(row.insertCell(-1));
  cell.html(genericDropDownListUpdateOne.val());

  cell = $(row.insertCell(-1));
  cell.html(genericDropDownListUpdateTwo.val());

  cell = $(row.insertCell(-1));
  cell.html(genericDropDownListUpdateThree.val());

  cell = $(row.insertCell(-1));
  cell.html(genericDropDownListUpdateFour.val());

  cell = $(row.insertCell(-1));
  cell.html(changeNoticeNumberLinkUpdate.val());

  cell = $(row.insertCell(-1));
  cell.html(holdLotNumberLinkUpdate.val());

  cell = $(row.insertCell(-1));
  cell.html(hotLotNumberLinkUpdate.val());

  cell = $(row.insertCell(-1));
  cell.html(wITALinkUpdate.val());

  cell = $(row.insertCell(-1));
  cell.html(commentUpdateSmall.val());

  cell = $(row.insertCell(-1));
  cell.html(commentUpdateMedium.val());

  cell = $(row.insertCell(-1));
  cell.html(commentUpdateLarge.val());

  cell = $(row.insertCell(-1));
  var timestamp = $("<div>@DateTime.Now</div>");
  cell.append(timestamp);


  toolListUpdate.val("");
  genericDropDownListUpdateOne.val("");
  genericDropDownListUpdateTwo.val("");
  genericDropDownListUpdateThree.val("");
  genericDropDownListUpdateFour.val("");
  changeNoticeNumberLinkUpdate.val("");
  holdLotNumberLinkUpdate.val("");
  hotLotNumberLinkUpdate.val("");
  wITALinkUpdate.val("");
  commentUpdateSmall.val("");
  commentUpdateMedium.val("");
  commentUpdateLarge.val("")

});

• javascript
• html

Share Improve this question Follow edited Nov 19, 2024 at 23:50 Mister Jojo 22.4k66 gold badges2525 silver badges4343 bronze badges asked Nov 19, 2024 at 23:00 DonnieDonnie 4366 bronze badges 3

• This question is similar to: Get element by class name instead of ID. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. – devlin carnate Commented Nov 19, 2024 at 23:49
• Use a class to reduce redundancy. You can bind a click event to the class. You can also find other elements in relation to the element that was clicked. – devlin carnate Commented Nov 19, 2024 at 23:55
• Set the selector not on the id of the element but on a class name. So you will have to create a single event handler only. In the event handler you can get the event target, from which you can get the element's id. See the docs for details on the parameters of the event handler – derpirscher Commented Nov 19, 2024 at 23:55

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You could use an attribute selector and then get the number from its id.

$("body").on("click", "[id^='addbtn']", function (e) {
  const [number] = e.currentTarget.id.match(/\d+$/); // number -> 3

  var toolListUpdate = $(`#ToolList${number}`);
  var genericDropDownListUpdateOne = $(`#GenericDropdownOne${number}`);
  var genericDropDownListUpdateTwo = $(`#GenericDropdownTwo${number}`);
  var genericDropDownListUpdateThree = $(`#GenericDropdownThree${number}`);
  // ...

});

本文标签： htmlJavaScript how to remove hard coded values on 39click39 functionStack Overflow