【问题标题】:I'm having trouble getting my JS variable display within my HTML我无法在我的 HTML 中显示我的 JS 变量
【发布时间】:2017-07-25 15:34:48
【问题描述】:

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

我正在为我工​​作的公司创建一个电子邮件模板。我似乎无法让 JS 变量 custName 显示在我上面发布的表格的 HTML sn-p id'd 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>';

【问题讨论】:

  • custName 从何而来?您必须提供更多代码。请添加您尝试的最小工作/可运行示例
  • 单击“运行代码 sn-p”并看到错误消息。那么定义缺失的变量呢?
  • 变量是var custName = "This customer";
  • 不要在你的 DOM 上乱扔&lt;script&gt; 标签。将 one &lt;script&gt; 标签放在 DOM 的 bottom 并在那里进行操作。我猜DOM在解析和运行&lt;script&gt;标签时甚至还没有完成创建&lt;td&gt;,这是问题的一部分。
  • 你还没有真正说出出了什么问题。 . .只是价值没有显示吗?你有错误吗?如果它确实有效,我也希望“亲爱的”会被消灭,这取决于你是如何编码的。 . .你看到这种行为了吗?

标签: javascript html netsuite suitescript


【解决方案1】:

当你写custName 没有""'' 时,Javascript 认为你指的是一个变量。它会查找名称为 custName 的变量,但没有找到,因此它会抛出 ReferenceError

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

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

或者只使用一个字符串。

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

【讨论】:

  • 对不起,我应该把它放在原来的帖子里。 var custName = "This customer";
【解决方案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>

【讨论】:

  • 但是 custName 是我的 JS 中的一个变量。这不只是打印字符串'custName'而不是使用变量吗?
  • 在这种情况下很酷,是的 custName 没有引号就可以了。只要确保带有变量的JS在&lt;script&gt;之上
【解决方案3】:

所以,我不熟悉 SuiteScript,所以我无法解决问题的特定部分,但我可以告诉您,您当前的代码没有输入到“代码 sn-p”部分这样可以让它正确运行。

现在,您的代码只有两个 JS 变量,但其中一个输入到 HTML 部分,因此它被视为 HTML 文本,而不是 JS 代码(您可以在运行 sn-p 时 HTML 的顶部)。

要让您的代码正常工作,您需要将其设置为:

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;
&lt;div id="emailBodyTarget"&gt;&lt;/div&gt;

但是。 . .

当您运行它时,您可以看到它插入了客户名称,但它也覆盖了模板中的“亲爱的”文本,因为它也包含在您的目标“客户名称”div 中JavaScript。

所以,我推荐两种替代方法之一(为了简单起见,将缩短代码 sn-ps):

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

var custName = "This customer";

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

在这种情况下: - HTML 与处理数据的脚本分开创建和维护, - 先将 HTML 添加到页面,然后再添加数据,以及 - 新的“目标span 元素”中仅包含客户姓名数据,因此所有静态模板化内容保持不变。

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

var custName = "This customer";
var emailBody = '<table style="border:1px black solid;">\
                   <tr>\
                     <td style="padding:3px 10px 3px 10px">Dear&nbsp;, {[{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;
&lt;div id="emailBodyTarget"&gt;&lt;/div&gt;

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

任何一种方法都应该可以正常工作(我将两种方法都包含在内,以防其中一种与 SuiteScript 相比,另一种更适用)。关键是要使模板中您希望添加数据的位置与模板中其他应保持不变的位置完全不同,并在插入客户数据时专门针对这些位置。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2020-10-04
    • 1970-01-01
    • 2019-12-01
    • 2022-10-07
    • 1970-01-01
    • 2019-07-06
    • 1970-01-01
    • 2017-03-06
    相关资源
    最近更新 更多