How to pass in values using dot notation

Question

Unable to pass in values using dot notation to target key value pairs in objects. As shown in the code below the language names cannot be hard coded as they need to change depending on the button clicked and there in lies my problem. Any help would be appreciated. Thankyou much.

 let languageData = {
        english: {
          placeholderValue: "username",
        },
        russian: {
          placeholderValue: "Имя пользователя",
        },
        french: {
          placeholderValue: "nom d'utilisateur",
        },
      };

      let inputTag = document.querySelector("#foreName");

      document.querySelectorAll(".language_Btns button").forEach((button) => {
        button.addEventListener("click", () => {
          let currentLang = button.dataset.language;
          console.log(currentLang); // returns english or russian or french depending on the button clicked.
          console.log(languageData.english.placeholderValue); // returns username (works fine!!)
          inputTag.setAttribute(
            "placeholder",
            `${languageData.russian.placeholderValue}`
          );
          console.log(languageData.currentLang.placeholderValue); // returns undefined ( WHY!!! )
    
        });
      });

  <div class="language_Btns">
      <button data-language="english">English</button>
      <button data-language="russian">Russian</button>
      <button data-language="french">French</button>
    </div>
    <div>
      <label for="foreName"></label>
      <input type="text" id="foreName" placeholder="username" />
    </div>

Answer 1

Because languageData.currentLang.placeholderValue doesn't exist. Use languageData[currentLang].placeholderValue.

EG:

let languageData = {
        english: {
          placeholderValue: "username",
        },
        russian: {
          placeholderValue: "Имя пользователя",
        },
        french: {
          placeholderValue: "nom d'utilisateur",
        },
      };

      let inputTag = document.querySelector("#foreName");

      document.querySelectorAll(".language_Btns button").forEach((button) => {
        button.addEventListener("click", () => {
          let currentLang = button.dataset.language;
          console.log(currentLang); // returns english or russian or french depending on the button clicked.
          console.log(languageData.english.placeholderValue); // returns username (works fine!!)
          inputTag.setAttribute(
            "placeholder",
            `${languageData[currentLang].placeholderValue}`
          );
          console.log(languageData[currentLang].placeholderValue);    
        });
      });

<div class="language_Btns">
      <button data-language="english">English</button>
      <button data-language="russian">Russian</button>
      <button data-language="french">French</button>
    </div>
    <div>
      <label for="foreName"></label>
      <input type="text" id="foreName" placeholder="username" />
    </div>

See: Mozilla's article on property accessors