Question

<td id = "customerName" style="font:12px Arial,Helvetica,sans-serif;color:#000001;padding:3px 0px 3px 10px">Dear&nbsp;<script>document.getElementById("customerName").innerHTML = custName</script>,</td>    </tr>    <tr>

我正在为我工作的公司创建一个电子邮件模板。我似乎无法将JS变量custName显示在我上面发布的表格的HTML代码段customerName中。

编辑：

这是我的完整HTML代码，它是使用SuiteScript API的Javascript程序中的变量

/**
 * @NApiVersion 2.x
 * @NScriptType UserEventScript
 * @NModuleScope SameAccount
 */
define(['N/email', 'N/record', 'N/search'],function(email, record, search) {
    function beforeLoad(scriptContext) {
    	
    }
    function beforeSubmit(scriptContext) {

    }
    function afterSubmit(scriptContext) {
    	var fromId = 450103; // my internal ID
    	var recordToSend = record.load({ //Fake Customer
    		type: record.Type.CUSTOMER,
    		id : 450104, 
    		isDynamic: false
    	}); 
    	
    	var salesOrder = record.load({
    		type: record.Type.SALES_ORDER,
    		id : 536583,
    		isDynamic: false
    	}); 
    	
    	var department = salesOrder.getValue({
    		fieldId : 'department'
    	});
    	
    	var departmentNames = ['Fire Pits Direct', 'Fireplace Remote Controls', 'Skytech Fireplace Remotes', 'Spotix', 'Kick Ass Grills', 'Teak Furniture Classics']; 
    	var deptName = ""; 
    	
    	for(var i = 19; i < 25; i++){
    		if(i == department){
    			deptName = departmentNames[i-19]; 
    		}
    	}
    	
    	var subjectForEmail = "Your Order Has Shipped From "+ deptName + "!"; 
    	var custName = "This customer";
    	
    	var emailBody = '<center></center>\
    		<table style="border:1px black solid;">\
    		<tbody><tr><td><img src="http://www.spotix.com/images/email/Spotix-family-stores_horizontal.jpg" alt="Spotix Family of stores" align="middle"></td>	</tr><tr><td bgcolor="#ff880f"><span style="padding-bottom:10px;font-weight: bold;font-family: Arial,Helvetica,sans-serif;font-size:28px;line-height: 34px;">&nbsp;&nbsp;&nbsp;Great News! Your order is on the way...</span></td>\
    		</tr>    <tr>    	<td id = "customerName" style="font:12px Arial,Helvetica,sans-serif;color:#000001;padding:3px 0px 3px 10px">Dear&nbsp;,</td>    </tr>    <tr>\
    		<td style="font:12px Arial,Helvetica,sans-serif;color:#000001;padding:3px 0px 3px 10px">We\'ve shipped your {createdfrom}</td>    </tr>    <tr>			  <td align="center" bgcolor="#ff880f" style="font-family:Verdana,Arial,Sans-serif;font-size:16px;color:#000000;font-weight: bold;text-align:left;text-decoration:none!important;padding-top:10px;padding-bottom:10px;padding-left:15px;padding-right:15px">Shipping Method - {shipmethod}</td>\
    		</tr>    <tr>    	<td width="444" align="left" valign="top" style="font:12px Arial,Helvetica,sans-serif;color:#000001;padding:3px 0px 3px 10px" bgcolor="#EEE9E7"><b>Ship To</b></td>    </tr>        <tr>    	<td style="font-family:Verdana,Arial,Sans-serif;font-\
    		size:12px;color:#000000;text-decoration:none!important;padding-top:10px;padding-bottom:10px;padding-left:15px;padding-right:15px">{shipaddress}<br></td></tr><tr><td width="444" align="left" valign="top" style="font:12px Arial,Helvetica,sans-serif;color:#000001;padding:3px 0px \
    		3px 10px" bgcolor="#EEE9E7"><b>Tracking Info</b></td></tr><tr><td style="font-family:Verdana,Arial,Sans-serif;font-size:12px;color:#000000;text-decoration:none!important;padding-top:10px;padding-bottom:10px;padding-left:15px;padding-right:15px">{shipmethod} \
    		{trackingnumbers}</td></tr><tr><td width="444" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td width="444" align="left" valign="top"><table border="0" cellpadding="0" cellspacing="0" height="21" width="100%"><tbody><tr><td \
    		align="left" bgcolor="#EEE9E7" style="font:12px Arial,Helvetica,sans-serif;color:#000001;padding:3px 0px 3px 10px" valign="bottom"><b>Details</b></td> </tr><tr><td align="left" valign="top" width="262"><span style="font-size: 11px;">QTY:&nbsp;{quantity}</span><span \
    		style="font-size: 11px;">&nbsp;SKU:</span>{custcol_item_sku}<span class="Apple-tab-span" style="font-size: 11px; white-space: pre;"></span><span style="font-size: 11px;">&nbsp;ITEM:</span>{item.description}</td></tr></tbody></table></td></tr></tbody></table></td></tr>\
    		</tbody></table>Thanks for your order!Questions? Call us now: Mon-Fri 8-5 CST 888.977.6849<img src="http://www.spotix.com/images/email/Benefits-Member_TP.jpg" alt="Spotix benefits" align="middle">\
    		<script>document.getElementById("customerName").innerHTML = custName</script>'; 
    		
    	
    	email.send({
    		author: fromId,
    		recipients: fromId,
    		subject: subjectForEmail,
    		body: emailBody,
    		isInternalOnly: false
    		
    	}); 
    	
}

    return {
        beforeLoad: beforeLoad,
        beforeSubmit: beforeSubmit,
        afterSubmit: afterSubmit
    };
    
});

var emailBody = '<center></center>\
    		<table style="border:1px black solid;">\
    		<tbody><tr><td><img src="http://www.spotix.com/images/email/Spotix-family-stores_horizontal.jpg" alt="Spotix Family of stores" align="middle"></td>	</tr><tr><td bgcolor="#ff880f"><span style="padding-bottom:10px;font-weight: bold;font-family: Arial,Helvetica,sans-serif;font-size:28px;line-height: 34px;">&nbsp;&nbsp;&nbsp;Great News! Your order is on the way...</span></td>\
    		</tr>    <tr>    	<td id = "customerName" style="font:12px Arial,Helvetica,sans-serif;color:#000001;padding:3px 0px 3px 10px">Dear&nbsp;,</td>    </tr>    <tr>\
    		<td style="font:12px Arial,Helvetica,sans-serif;color:#000001;padding:3px 0px 3px 10px">We\'ve shipped your {createdfrom}</td>    </tr>    <tr>			  <td align="center" bgcolor="#ff880f" style="font-family:Verdana,Arial,Sans-serif;font-size:16px;color:#000000;font-weight: bold;text-align:left;text-decoration:none!important;padding-top:10px;padding-bottom:10px;padding-left:15px;padding-right:15px">Shipping Method - {shipmethod}</td>\
    		</tr>    <tr>    	<td width="444" align="left" valign="top" style="font:12px Arial,Helvetica,sans-serif;color:#000001;padding:3px 0px 3px 10px" bgcolor="#EEE9E7"><b>Ship To</b></td>    </tr>        <tr>    	<td style="font-family:Verdana,Arial,Sans-serif;font-\
    		size:12px;color:#000000;text-decoration:none!important;padding-top:10px;padding-bottom:10px;padding-left:15px;padding-right:15px">{shipaddress}<br></td></tr><tr><td width="444" align="left" valign="top" style="font:12px Arial,Helvetica,sans-serif;color:#000001;padding:3px 0px \
    		3px 10px" bgcolor="#EEE9E7"><b>Tracking Info</b></td></tr><tr><td style="font-family:Verdana,Arial,Sans-serif;font-size:12px;color:#000000;text-decoration:none!important;padding-top:10px;padding-bottom:10px;padding-left:15px;padding-right:15px">{shipmethod} \
    		{trackingnumbers}</td></tr><tr><td width="444" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td width="444" align="left" valign="top"><table border="0" cellpadding="0" cellspacing="0" height="21" width="100%"><tbody><tr><td \
    		align="left" bgcolor="#EEE9E7" style="font:12px Arial,Helvetica,sans-serif;color:#000001;padding:3px 0px 3px 10px" valign="bottom"><b>Details</b></td> </tr><tr><td align="left" valign="top" width="262"><span style="font-size: 11px;">QTY:&nbsp;{quantity}</span><span \
    		style="font-size: 11px;">&nbsp;SKU:</span>{custcol_item_sku}<span class="Apple-tab-span" style="font-size: 11px; white-space: pre;"></span><span style="font-size: 11px;">&nbsp;ITEM:</span>{item.description}</td></tr></tbody></table></td></tr></tbody></table></td></tr>\
    		</tbody></table>Thanks for your order!Questions? Call us now: Mon-Fri 8-5 CST 888.977.6849<img src="http://www.spotix.com/images/email/Benefits-Member_TP.jpg" alt="Spotix benefits" align="middle">\
    		<script>document.getElementById("customerName").innerHTML = custName</script>';

Answer 1

当您在没有custName或""的情况下撰写''时，Javascript认为您指的是变量。它会查找名为custName的变量，但找不到它，因此会抛出ReferenceError。

确保custName是已定义的变量并且是一个字符串。或者，只使用普通字符串。

var custName = 'John';
document.getElementById("customerName").innerHTML = custName;

或只是使用字符串。

document.getElementById("customerName").innerHTML = 'John';

Answer 2

我将脚本标记放在最后以避免阻塞并将custName设置为字符串。

<td id ='customerName' style='font:12px Arial,Helvetica,sans-serif; 
color:#000001;padding:3px 0px 3px 10px'>
Dear&nbsp;
</td>
<script>document.getElementById("customerName").innerHTML = 'custName'</script>

Answer 3

所以，我不熟悉SuiteScript，所以我无法解决问题的这个特定部分，但我可以告诉你，你当前的代码没有输入到＆＃34;代码中片断＆＃34;部分以允许它正确运行的方式。

现在，您的代码只有两个JS变量，但其中一个输入HTML部分，因此它被视为HTML文本，而不是JS代码（您可以看到呈现的脚本的var emailBody =部分在运行代码段时在HTML的顶部。）

为了让您的代码工作正常，您需要将其设置为以下内容：

＆＃13;

var custName = "This customer";
var emailBody = '<center></center>\
    		<table style="border:1px black solid;">\
    		<tbody><tr><td><img src="http://www.spotix.com/images/email/Spotix-family-stores_horizontal.jpg" alt="Spotix Family of stores" align="middle"></td>	</tr><tr><td bgcolor="#ff880f"><span style="padding-bottom:10px;font-weight: bold;font-family: Arial,Helvetica,sans-serif;font-size:28px;line-height: 34px;">&nbsp;&nbsp;&nbsp;Great News! Your order is on the way...</span></td>\
    		</tr>    <tr>    	<td id = "customerName" style="font:12px Arial,Helvetica,sans-serif;color:#000001;padding:3px 0px 3px 10px">Dear&nbsp;,</td>    </tr>    <tr>\
    		<td style="font:12px Arial,Helvetica,sans-serif;color:#000001;padding:3px 0px 3px 10px">We\'ve shipped your {createdfrom}</td>    </tr>    <tr>			  <td align="center" bgcolor="#ff880f" style="font-family:Verdana,Arial,Sans-serif;font-size:16px;color:#000000;font-weight: bold;text-align:left;text-decoration:none!important;padding-top:10px;padding-bottom:10px;padding-left:15px;padding-right:15px">Shipping Method - {shipmethod}</td>\
    		</tr>    <tr>    	<td width="444" align="left" valign="top" style="font:12px Arial,Helvetica,sans-serif;color:#000001;padding:3px 0px 3px 10px" bgcolor="#EEE9E7"><b>Ship To</b></td>    </tr>        <tr>    	<td style="font-family:Verdana,Arial,Sans-serif;font-\
    		size:12px;color:#000000;text-decoration:none!important;padding-top:10px;padding-bottom:10px;padding-left:15px;padding-right:15px">{shipaddress}<br></td></tr><tr><td width="444" align="left" valign="top" style="font:12px Arial,Helvetica,sans-serif;color:#000001;padding:3px 0px \
    		3px 10px" bgcolor="#EEE9E7"><b>Tracking Info</b></td></tr><tr><td style="font-family:Verdana,Arial,Sans-serif;font-size:12px;color:#000000;text-decoration:none!important;padding-top:10px;padding-bottom:10px;padding-left:15px;padding-right:15px">{shipmethod} \
    		{trackingnumbers}</td></tr><tr><td width="444" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tbody><tr><td width="444" align="left" valign="top"><table border="0" cellpadding="0" cellspacing="0" height="21" width="100%"><tbody><tr><td \
    		align="left" bgcolor="#EEE9E7" style="font:12px Arial,Helvetica,sans-serif;color:#000001;padding:3px 0px 3px 10px" valign="bottom"><b>Details</b></td> </tr><tr><td align="left" valign="top" width="262"><span style="font-size: 11px;">QTY:&nbsp;{quantity}</span><span \
    		style="font-size: 11px;">&nbsp;SKU:</span>{custcol_item_sku}<span class="Apple-tab-span" style="font-size: 11px; white-space: pre;"></span><span style="font-size: 11px;">&nbsp;ITEM:</span>{item.description}</td></tr></tbody></table></td></tr></tbody></table></td></tr>\
    		</tbody></table>Thanks for your order!Questions? Call us now: Mon-Fri 8-5 CST 888.977.6849<img src="http://www.spotix.com/images/email/Benefits-Member_TP.jpg" alt="Spotix benefits" align="middle">';

//insert the email body into the HTML
document.getElementById("emailBodyTarget").innerHTML = emailBody;
//insert the customer name into the email body
document.getElementById("customerName").innerHTML = custName;

＆＃13;

<div id="emailBodyTarget"></div>

＆＃13;

然而。。

运行时，您可以看到它插入了客户名称，但它也会覆盖＆＃34;亲爱的，＆＃34;来自模板的文本，因为它也包含在＆＃34; customerName＆＃34;您使用JavaScript定位的div。

所以，我建议的是两种替代方法中的一种（为了简单起见，缩短代码片段）：

为JavaScript单独创建HTML，为您希望使用数据更新的每个HTML模板包含目标span包装，并在加载HTML后使用JavaScript插入数据。这看起来像这样：

＆＃13;
＆＃13;
var custName = "This customer"; //insert the customer name into the email body document.getElementById("customerName").innerHTML = custName;
＆＃13;
<table style="border:1px black solid;"> <tr> <td style="padding:3px 10px 3px 10px"> Dear , <span id="customerName"></span> </td> </tr> </table>
＆＃13;
＆＃13;
＆＃13;

在这种情况下： - HTML与处理数据的脚本分开创建和维护， - 首先将HTML添加到页面中，然后添加数据 - 只有客户名称数据包含在新的＆＃34;目标span元素＆＃34;中，因此所有静态的模板化内容都保持不变。

使用JS动态创建模板，但在模板字符串中使用占位符，并使用JavaScript字符串.replace()方法在将模板添加到页面之前使用客户数据更新模板。这看起来像这样：

＆＃13;
＆＃13;
var custName = "This customer"; var emailBody = '<table style="border:1px black solid;">\ <tr>\ <td style="padding:3px 10px 3px 10px">Dear , {[{customerName}]}</td>\ </tr>\ </table>'; //replace the "customerName" placeholder in the template with the actual customer name emailBody = emailBody.replace("{[{customerName}]}", custName); //insert the email template into the HTML document.getElementById("emailBodyTarget").innerHTML = emailBody;
＆＃13;
<div id="emailBodyTarget"></div>
＆＃13;
＆＃13;
＆＃13;

在这种情况下： - HTML是作为处理数据的脚本的一部分创建的， - HTML仅在数据插入模板字符串后添加到 - 数据占位符是模板中唯一被客户数据替换的部分，因此（再次）所有静态的模板化内容保持不变。

任何一种方法都应该可以正常工作（我将两者都包括在一起，使用SuiteScript比另一种更好）。关键是要使模板中您希望添加数据的位置与应该保持不变的模板的其余部分完全不同，并在插入客户数据时专门针对这些位置。

我在HTML

3 个答案: