I am having javascript code in my phtml file, but I want to do it from layout and create separate phtml file pass variable from require js. Can anyone tell me how to do this?
My phtml file code is
<script> document.getElementById("hello").style.display = "none"; function hideItem(){ const pattern = /^\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b$/i const textValue = document.getElementById("names").value; if(!pattern.test(textValue)){ document.getElementById("hello").style.display = "none"; } else{ document.getElementById("hello").style.display = "block"; } } document.getElementById("msgbutton").addEventListener("click", hideItem); function validateItem() { var response = val.getResponse(); if(response.length == 0) { document.getElementById('test-error').innerHTML = '<span style="color:red;"><?= __('This field is required') ?></span>'; return false; } return true; } function test() { document.getElementById('test-error').innerHTML = ''; }
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<script src="Vendor_Module::js/test.js"/>
</head>
<body>
<referenceContainer name="content">
<block class="Mageplaza\HelloWorld\Block\Display" name="helloworld_display" template="Vendor_Module::my.phtml" />
</referenceContainer>
</body>
</page>
var config = {
map: {
'*': {
'myscript': 'Vendor_Module/js/productdesigner'
}
}
};