HTML字符串嵌入变量后placeholder显示undefined的问题求助

Let's break down what's causing your placeholder to show undefined and fix it step by step:

Key Problems in Your Code #

1. Template String Interpolation Timing
   You define htmlBlock as a template string right when dataType is still uninitialized (it's declared but has no value). Template strings resolve their interpolated variables at the moment they're created, not when you later use the string. So even if you set dataType later, htmlBlock already has undefined baked into it.

2. Incorrect getElementsByClassName Usage
   The method takes a class name without the leading dot. document.getElementsByClassName('.js-phone') will look for elements with a class literally named .js-phone, which isn't what you want. Also, this method returns an HTMLCollection, so you need to check if it has any elements before proceeding.

3. Potential Scope/Context Issue
   If this code is inside a class, make sure this.phone refers to the correct element you want to update.

Solutions to Fix the Placeholder #

Solution 1: Generate the HTML String Dynamically (Recommended) #

Turn htmlBlock into a function that accepts dataType as an argument, so it generates fresh HTML with the current value every time you need it:

// Define a function instead of a static string
function getHtmlBlock(dataType) {
  return `<div class="icon negative big toleft" id="cancel-btn"><i class="fas fa-minus-circle"></i></div> 
<div class="icon add big toleft"><i class="fas fa-check-circle"></i></div> 
<input type="text" class="contact-input" style="margin-bottom: 5px;" maxlength="50" name="my-contact-phone" data-name="Name" placeholder="${dataType}">`;
}

// Then use it like this:
const phoneElements = document.getElementsByClassName('js-phone');
if (phoneElements.length > 0) {
  const dataType = "Add your number ";
  this.html = this.phone.html();
  this.phone.html(getHtmlBlock(dataType));
}

Solution 2: Reassign htmlBlock After Setting dataType #

If you prefer to keep using a variable, create the template string after you've set the value of dataType:

let dataType;
let htmlBlock;

const phoneElements = document.getElementsByClassName('js-phone');
if (phoneElements.length > 0) {
  dataType = "Add your number ";
  // Create the template string now that dataType has a value
  htmlBlock = `<div class="icon negative big toleft" id="cancel-btn"><i class="fas fa-minus-circle"></i></div> 
<div class="icon add big toleft"><i class="fas fa-check-circle"></i></div> 
<input type="text" class="contact-input" style="margin-bottom: 5px;" maxlength="50" name="my-contact-phone" data-name="Name" placeholder="${dataType}">`;
  this.html = this.phone.html();
  this.phone.html(htmlBlock);
}

Solution 3: Update the Placeholder Directly in the DOM #

Instead of re-rendering the entire HTML block, target the input element and set its placeholder property directly (this is more efficient if you don't need to re-render the buttons):

const phoneElements = document.getElementsByClassName('js-phone');
if (phoneElements.length > 0) {
  const dataType = "Add your number ";
  // Assuming the input is inside the .js-phone element
  const contactInput = this.phone.querySelector('.contact-input');
  if (contactInput) {
    contactInput.placeholder = dataType;
  }
}

内容的提问来源于stack exchange，提问作者user9217262