Hi all,
I’m quite new to Phoenix liveview and certain aspects are still confusing to me.
I’m testing out tailwind on Phoenix liveview.
What I have here is an html calling the searchHandler function from the script tag and it works without a problem.
<div class="px-6 h-full flex items-center justify-center border-l border-gray-300 text-gray-400 flex items-center">
<input type="text" class="bg-transparent focus:outline-none text-xs w-0 transition duration-150 ease-in-out" placeholder="Type something..." />
<svg onclick="searchHandler(this)" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search cursor-pointer" width="28" height="28" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" />
<circle cx="10" cy="10" r="7" />
<line x1="21" y1="21" x2="15" y2="15" />
</svg>
</div>
<script>
function searchHandler(element) {
let Input = element.parentElement.getElementsByTagName("input")[0];
Input.classList.toggle("w-0");
}
</script>
I was wondering if it’s possible to move the function from inside script tag into the app.js
inside the assets directory and have the html execute the onlick function of the JS from the assets directory.
If it is possible, what are the necessary steps to achieve this goal?