How to change form action when a 'preview' button is clicked

Question

I am trying to get a different page, preview.php to show when the Preview Button is clicked, by changing the action of the form. The preview button should lead to another page where I can view the inputs from the file and maybe have options to submit or go back.

The other buttons, submit and clear work however the preview button does not seem to be working. It stays on the same page even after clicking the button.

As a test I put in some alerts. 'here1' and 'here2' alerts work, but 'here3' alert does not work, making me believe the changeAct() function is not reached. How can I fix this so the form action can be changed?

const wrapper = document.getElementById('blog-btn');

wrapper.addEventListener('click', (event) => {
  const btn = event.target.nodeName === 'BUTTON';
  if (!btn) {
    return;
  } else {
    processClick(event.target.id)
  }
});

function processClick(id) {
    
    alert("Id is "+ id);
    
    if(id == "pre")
    {   
        alert("here 1");
        document.getElementById('pre').addEventListener('click', changeAct);
        alert("here 2");
   }

}

function changeAct()
{
    alert("here 3");
    document.getElementById('frm1').action="preview.php";
}

<form id="frm1" name="post_form" action="addEntry.php" method="post">
        <div id="blog-btn">
            <!--Post & Clear Form Buttons-->
            <button type="button" value="Preview" id="pre" >PREVIEW</button>
            <button type="submit" value="Submit" id="sub">SUBMIT</button>
            <button type="reset" value="Reset" id="clear">CLEAR</button>
        </div>
 </form>