CODEWITHSUNDEEP
javascripthtmlkendo-ui
Alex Leach
Alex Leach

Reputation: 118

Change HTML button text that has no ID using Javascript

I'm working on a project where I have to change the text inside a button, but the button is not allowed to have an ID. I'm wondering how to accomplish this. If it helps, I am using Kendo UI, which I believe is how the button is given its onClick method using data-bind:

<button class="some-css-classes" data-bind="click: myJavascriptFunction">Text I want to change</button>

Upvotes: 2

Views: 1094

Answers (4)

rubentd
rubentd

Reputation: 1275

One workaround might be using a data-id attribute.

<button data-id="unique_id">Text I want to change</button>

and then

document.querySelector('[data-id=unique_id]').innerHTML = 'something';

or

$("[data-id=unique_id]").html('something')

if you're using jquery

Upvotes: 1

AndrewL64
AndrewL64

Reputation: 16331

You can avoid adding more attributes by just targeting the existing data-bind attribute and change the text inside like this:

var x = document.querySelector('[data-bind="click: myJavascriptFunction"]');

x.innerHTML = "Hello World";

jsFidldle: http://jsfiddle.net/AndrewL64/z7t31psn/1/

Or if you don't want to create an extra variable:

document.querySelector('[data-bind="click: myJavascriptFunction"]').innerHTML = "Hello World";

jsFidldle: http://jsfiddle.net/AndrewL64/z7t31psn/2/

Upvotes: 4

Jujhar Singh
Jujhar Singh

Reputation: 373

document.getElementsByClassName("class1 class2 class3")[0].innerHTML = "test" replace zero with the appropriate index. This may require updating if the website markup is modified.

Upvotes: 0

FabioStein
FabioStein

Reputation: 930

You can get it by a class

<button class="test">
Test Button
</button>

document.getElementsByClassName('test')[0].innerHTML="Text Changed"

Upvotes: 0

Related Questions