I want to change the text of a button using the onclick property, but the value of the parameter 'text' it's appearing when i load the page. Also when i click the button it's text changes to 'undefined'.

That's the code (I starded with Javascript like a week ago so it's probably really bad):

function changeText(text) {
  let btn = document.querySelector('button#btn')
  btn.innerHTML = text
}
changeText('new text')

<button id="btn" onclick="changeText()"></button>

CodePudding user response：

function changetext(text) {
var btn = document.getElementById('btn');
btn.innerText = text;
}

<button id="btn" onclick="changetext('Clicked')">Click</button>

you don't need to call changetext() in the JavaScript because as soon as the JavaScript loads its going to change the text on the button, remember your calling the function when you click the button.

I'm guessing you thought you had to initialize the function by calling it for it to work, you don't need to. Great your learning though.

CodePudding user response：

1. It's appearing because you're immediately calling the function in the JS (changeText('new text')). If you want to change the text when the button is clicked you should add that text to that inline JS instead.

2. You should probably also use textContent or innerText instead of innerHTML if this is plain text.

3. The button requires some initial text so you can see to click on it.

function changeText(text) {
  let btn = document.querySelector('button#btn');
  btn.textContent = text;
}

<button id="btn" onclick="changeText('New text')">Old text</button>

Having written that: modern JS has since moved away from inline JS (separation of concerns). Now it's more usual to see addEventListener being used.

Here's an example that uses the value from an input box to update the button text.

const input = document.querySelector('input');
const button = document.querySelector('button');

button.addEventListener('click', changeText);

function changeText() {
  button.textContent = input.value;
}

<input type="text">
<button type="button">Old text</button>

CodePudding user response：

The reason why text changed on page load is because you are calling changeText function inside your javascript. And the reason why it shows "undefined" when you click the button, is because you don't send any text from within onclick event handler.

So, all you need to do is move changeText("new text") inside onclick handler.

(Also, avoid using innerHTML, use textContent instead.) (This is to help avoid XSS)

function changeText(text) {
  let btn = document.querySelector('button#btn')
  btn.textContent = text
}
//    changeText('new text') //don't need this

<button id="btn" onclick="changeText('new text')">my button</button>

One more note, to get element with ID use document.getElementById()

CodePudding user response：

changeText('new text')

This calls the function immediately when the JS file is loaded so it makes sense that the button would have that text.

<button id="btn" onclick="changeText()"></button>

Here you're calling the function again by clicking the button, but you're not passing any text in your parentheses so that's why you're getting undefined.

This is how you should call your function. Using textContent like others suggested.

function changeText(text) {
  let btn = document.querySelector('button#btn')
  btn.textContent = text
}
<button id="btn" onclick="changeText('new text')"></button>