Javascript 在html代码中添加字符串变量

我有一个包含几个按钮和一个文本输入的html块。应在不同情况下更改此文本输入的占位符。 因此，我添加了一个字符串变量。然后我将html放入另一个字符串变量中：

var dataType;

var 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}>`

编译后，在文本输入占位符中，此文本显示为：未定义

有谁能帮我做这件事吗？

---

谢谢你的帮助

您的占位符需要用双引号“”括起来。如果需要$（数据类型）将值作为占位符（我假设为jQuery值）放入，则需要如下连接字符串：

placeholder="' + dataType + '"

不要错过要连接的双引号之间的单引号。

---

看起来您正在尝试使用jquery获取和设置一个值。最好获取对象的值，例如$（myVal）.val（），然后使用变量将其设置到其他代码中。

在引用其他JavaScript变量之前，需要关闭字符串。然后用“+”运算符连接字符串并完成标记。例如：

var htmlBlock = '...<input type="text" class="contact-input" style="margin-bottom: 5px;" maxlength="50" name="my-contact-phone" data-name="Name" placeholder=' + dataType + '>';

var-htmlBlock='…'；

---

引号中的任何内容都将被视为字符，而不是程序代码。

在您的情况下，您的

数据类型

变量应在之前定义，然后在字符串文本（模板）中使用该变量：

var数据类型='HELLO'；
var htmlBlock=`
`;
console.log（htmlBlock）；

---

已更新：

在这种情况下，您可以执行以下操作：

var getHtmlBlock = function(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}">`;
};

var myDataType =  getHtmlBlock('Add your number');
console.log(myDataType); // replaced string with argument value;

var getHtmlBlock=函数（数据类型）{
返回``；
};
var myDataType=getHtmlBlock（“添加您的号码”）；
console.log（myDataType）；//用参数值替换字符串；

---

将字符串放入函数中，并通过作为参数传递来替换

${dataType}

。

可以将htmlBlock变量转换为接收参数“dataType”并返回所需html数据字符串的函数

这是JavaScript的简化版本：

• 测试是否存在类名为“js phone”的元素
• 触发窗口提示以询问用户信息（电话号码）
• 然后将该信息保存到变量“dataType”
• 该变量被传递到htmlBlock函数中
• 然后，返回带有新值的html数据字符串

函数htmlBlock（数据类型）{
//这里重要的关键词是“返回”。。。
//调用此函数时，它将返回
//（或返回）此处描述的html字符串
返回`
`;
}
if（document.getElementsByClassName（'js-phone'））{
//window.prompt将返回
//用户——将返回的值分配给
//名为dataType的变量
var dataType=window.prompt（'您的电话号码是多少？'）；
//这只是用
//“js phone”类并从中添加html数据
//函数的作用是：
document.getElementsByClassName（'js-phone'）[0].innerHTML=htmlBlock（数据类型）；
//这里的关键是调用htmlBlock（数据类型）
//我们从提示中获取了数据类型
//htmlBlock是我们上面写的函数。
};
要使用这种类型的字符串连接，请使用大括号作为变量
${dataType}
（不是普通的圆括号）@Doug非常感谢您的帮助。我做到了，现在它在占位符中显示为未定义。您可以提供更多JavaScript吗？可能是链接到JSFIDLE还是什么？@Doug我刚刚发现问题出在哪里。如果我在第一行的dataType变量中添加一个值，一切都会很好。但是我需要这个变量在if条件中获取一个值。不使用htmlBlock作为变量，您可以将它转换为一个函数，该函数返回html数据
函数htmlBlock（dataType）{return…；}
然后在
this.phone.html（）中调用它
您可以传递数据类型变量并获取更新的result@donCarlosll非常感谢，它现在可以工作了，但问题是，它现在没有定义。我刚发现问题出在哪里。如果我在第一行的dataType变量中添加一个值，一切都会很好。但是我需要这个变量在if条件中得到一个值是的，这是正确的，但是我真的需要这个变量在if条件中得到一个值。不是在它之前
var dataType = 'HELLO';
var 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}">`;

console.log(htmlBlock);

var getHtmlBlock = function(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}">`;
};

var myDataType =  getHtmlBlock('Add your number');
console.log(myDataType); // replaced string with argument value;