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' } } };