Dynamically update title property based on current menu item using javascript

Question

var a; titleText=""; hardCodedTitle="";
var menuCount = document.getElementsByClassName().length;
$('a.UserSelectedItems').each(function(){
for(a=0; a<menuCount; a++){
title += $('a.UserSelectedItems')[a].innerText;
if(title == "B-1"){
hardCodedTitle = "B-1: Business sector 1";
$('a.UserSelectedItems').attr('title',hardCodedTitle);
}
else if(title == "B-2"){
hardCodedTitle = "B-2: Business sector 2";
$('a.UserSelectedItems').attr('title',hardCodedTitle);
}
else if(title == "D-5"){
hardCodedTitle = "D-5: Development group 5";
$('a.UserSelectedItems').attr('title',hardCodedTitle);
}
else{
hardCodedTitle = "Not categorized";
$('UserSelectedItems').attr('title',hardCodedTitle);
}
}
});

<div class="ui menu" id="Menu">
    <a class="UserSelectedItems" title="A-1">A-1</a>
    <a class="UserSelectedItems" title="A-2">A-2</a>
    <a class="UserSelectedItems" title="B-1">B-1</a>
    <a class="UserSelectedItems" title="B-2">B-2</a>
    <a class="UserSelectedItems" title="D-2">D-2</a>
    <a class="UserSelectedItems" title="D-5">D-5</a>
    <a class="UserSelectedItems" title="E-2">E-2</a>
    </div>
<input type="text" id="populateTitle" placeholder="hardcoded title populate OnClick menu items">
//OnClick of menu item, hardcode title value as per the js should be populated in this text box

I have a requirement where on hovering the each menu item(menu is dynamically updated as per user selection), hard coded title has to be populated dynamically. I'm able to get the dynamic menu item as title as of now, and I need help to populate hard-coded title based on each dynamic menu item using javascript.

Above is example code(not the exact code that works) to show my scenario. Firstly based on user selection, menu items are populated(few might be unselected). So my requirement is to display hardcoded value as title based on menu items selected by user.

If user selects items: B-1,B-2,D-5 , then hardcoded title has to be shown as pop-up on hovering each menu item.

div class="ui menu" id="Menu">
...
<a class="UserSelectedItems" title="${eachDataSet.getKey()}">${eachDataSet.getKey()}</a>
</div>

My actual html code looks somewhat as above. Thanks!

2nd edit... I used the below code(answered by @rucha) and it's working fine. Now additional requirement is I have an input field of type text. How can I populate title(hard-coded title for each menu item) on click of each item, as text box value?

rucha rucha · Accepted Answer · 2021-02-09T15:35:43

There are some basic errors like,

While accessing the document.getElementsByClassName(), you need to pass the class name. Like document.getElementsByClassName("UserSelectedItems");
If you're using $.each, you need not use for loop again for the same purpose.

I have modified the code so that inside the $.each block, the title is being assigned to the each <a> link, based on your conditions.

var a;
titleText = "";
hardCodedtitle = "";
var menuCount = document.getElementsByClassName("UserSelectedItems");
$(menuCount).each(function(index, item) {
  title = item.title;
  if (title == "B-1") {
    hardCodedTitle = "B-1: Business sector 1";
    $(item).attr("title", hardCodedTitle);
    $(item).attr("data-hardcoded", "true");
  } else if (title == "B-2") {
    hardCodedTitle = "B-2: Business sector 2";
    $(item).attr("title", hardCodedTitle);
    $(item).attr("data-hardcoded", "true");
  } else if (title == "D-5") {
    hardCodedTitle = "D-5: Development group 5";
    $(item).attr("title", hardCodedTitle);
    $(item).attr("data-hardcoded", "true");
  } else {
    hardCodedTitle = "Not categorized";
    $(item).attr("title", hardCodedTitle);
    $(item).attr("data-hardcoded", "true");
  }

});

function populateTitle(e) {
  if (e.currentTarget.hasAttribute("data-hardcoded")) {
    $("#populateTilte").val(e.currentTarget.getAttribute("title"));
  } else {
    $("#populateTilte").val("");

  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<div class="ui mini vertical menu" id="verticalMenu">
  <a class="UserSelectedItems" title="A-1" onclick="populateTitle(event)">A-1</a>
  <a class="UserSelectedItems" title="A-2" onclick="populateTitle(event)">A-2</a>
  <a class="UserSelectedItems" title="B-1" onclick="populateTitle(event)">B-1</a>
  <a class="UserSelectedItems" title="B-2" onclick="populateTitle(event)">B-2</a>
  <a class="UserSelectedItems" title="D-2" onclick="populateTitle(event)">D-2</a>
  <a class="UserSelectedItems" title="D-5" onclick="populateTitle(event)">D-5</a>
  <a class="UserSelectedItems" title="E-2" onclick="populateTitle(event)">E-2</a>
</div>

<input type="text" id="populateTilte" placeholder="Hardcoded Title">

Dynamically update title property based on current menu item using javascript

1 Answers