Even I am trying to pull the Ampscript Data into Javascript Variable.
Your approach didnt work for me.
Couple of questions here:
Where should the Script Tag included? Is it inside Head tag/inside Body tag/after body tag?
Tried with Document Ready/body onLoad functions too. No luck!
Tried with Wait time to load element, I could see the element in console as below.
input id="CodeP" type="hidden" value="<table cellpadding"
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Retrieve value of hidden field
var promoId1 = document.getElementById("promoId1").innerHTML;
console.log('promoId1 ready->',promoId1);
// Retrieve inner html of the p tag
var codeP = document.getElementById("CodeP").value;
console.log('codeP ready->',codeP);
});
</script>
</head>
<body >
<div class="myClass" id="page1">
Header
%%[
var @promoTemplate1
SET @promoTemplate1=ContentBlockbyKey("PromoTemplate1_Key")
]%%
html:
<div style=""><p id="promoId1">%%=v(@promoTemplate1)=%%</p></div>
value:
<input id="CodeP" type="hidden" value="%%=v(@promoTemplate1)=%%">
</div>
</body>
<script>
// Retrieve value of hidden field
var promoId1 = document.getElementById("promoId1").innerHTML;
console.log('promoId1->',promoId1);
// Retrieve inner html of the p tag
var element= document.getElementById("CodeP");
console.log('element->',element);
var codeP = document.getElementById("CodeP").value;
console.log('codeP->',codeP);
</script>
</html>
PS: I am able to see Ampscript Values inside Cloudpage UI
When I printed the Output using below log, i could see HTML Text wrapped to my actual content. Could'nt seperate it out even with TreatAsContent.
console.log(`%%=v(@promoTemplate1)=%%`);
Output:
<table cellpadding="0" cellspacing="0" width="100%" role="presentation" style="min-width: 100%; " class="stylingblock-content-wrapper"><tr><td class="stylingblock-content-wrapper camarker-inner">**mycontent**</td></tr></table>