CODEWITHSUNDEEP
javascripthtml
Oystein
Oystein

Reputation: 1322

Changing inner HTML of a button with dynamic id

On a project I'm working on, a HTML file is defining a Javascript template used on selection buttons. All buttons have a "Change..." label that I want to localize (set dynamically). In other cases I'm searching for the element ID and setting the InnerHTML accordingly. But in this case, the ID of the buttons are defined dynamically. Is it possible to have a text element inside the button element, search for this element, and set its InnerHTML value?

<script id="optionSelectionTemplate" type="text/x-handlebars-template">
    <div class="sub-section option-selection">
        {{#if name}}<h4>{{name}}</h4>{{/if}}
        <div class="current"></div><button class="button" id="{{id}}" data-action-id="{{id}}">Change...</button>
    </div>
</script>

I've been searching this for a while now. But given that my forte is not web development, I'm not really sure what to search for...

Upvotes: 1

Views: 461

Answers (3)

Hk_developer
Hk_developer

Reputation: 1

You find those btns by this command:

var btnlist= $(':button') This Camano get you all button in your html file, then loop ton in and apply your changing. Before call this command, jquery must be install.

Upvotes: 0

Aleister Tanek Javas Mraz
Aleister Tanek Javas Mraz

Reputation: 517

You may be able to get the button element(s) by its class instead; for example:

var x = document.getElementsByClassName("button");

As you suggested, you can improve your selection's precision by first getting the 'optionSelectionTemplate' element(s) like so:

var x = document.getElementById("optionSelectionTemplate").getElementsByClassName("button");

Or if you prefer:

var x = document.getElementById("optionSelectionTemplate").getElementsByTagName("button");

Here are some links for more on these method: https://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp https://www.w3schools.com/jsref/met_document_getelementsbytagname.asp

Upvotes: 1

dasmy
dasmy

Reputation: 597

Depending on how dynamic your localization should become, you could also specify the text inside a (locale-dependent) CSS as in https://jsfiddle.net/1gws5kat/ :

[HTML]
<button class="button btn_change" id="{{id}}" data-action-id="{{id}}"></button>
[CSS]
.btn_change:before { content: "Change..."; }

In particular when dealing with a large number of identically-named elements (i.e. many "Change" buttons), this might be pretty handy.

Upvotes: 0

Related Questions