使用外部文件使用 javascript 对按钮进行编程

Question

Hey guys im trying to program a button in javascript, I called a the button when the button is clicked but it doesnt seem to work. any help would be great. Thanks (this is my first time asking a question so please forgive if my format isnt correct. )

// HTML

<div>
  <button onclick = "page"  > Test button </button>
< /div>

// Javascript

function page () {
  <input type="button" onclick="location.href='https://google.com';" 
        value="Go to Google" />
}

Answer 1

You need React to have HTML inside JavaScript in (more or less) the way you wrote it

It is also not recommended to have inline event handling (onclick etc)

You likely mean

 window.addEventListener('DOMContentLoaded', function() { // when elements on page are available document.getElementById('page').addEventListener('click', function() { // when button clicked location.href = "https://google.com"; }); });

 <div> <button id="page" type="button">Go to Google</button> </div>

Answer 2

You can do this with just html if you don't want to use react

<button onclick="window.location.replace('https://www.google.com')">
  Click Me
</button>

Answer 3

You can't just use plain HTML inside a vanilla JavaScript function.

With plain JS you can assign a DOM element Object to a variable and add an event listener that will trigger the function you create on click:

    const btn = document.querySelector("button");
   
    function redirectToGoogle () {
       window.location.replace('https://www.google.com')
    }

    btn.addEventListener('click', redirectToGoogle);

Answer 4

ANSWER

1. In HTML file, you didn't call page function on button onclick event.
2. In JavaScript file, location.href is used to locate to another page when you are on the same page.

 function page() { location.href = "https://www.google.com/"; }

 <button onclick = "page()" >Test button</button>