0

This webpage has two dropdown options, which seem to hold the text in innertext/innerHTML. However if you update the innertext it can change the text shown on the webpage but does not really update the field which then causes the rest of the page to load. I was wondering how to update this field. See innertext on line 6.

<div class="av-select is-untouched av-valid css-b62m3t-container" id="orgSelect">
    <span id="react-select-2-live-region" class="css-7pg0cj-a11yText"/>
    <span aria-live="polite" aria-atomic="false" aria-relevant="additions text" class="css-7pg0cj-a11yText"/>
    <div class="organization-select__control css-1nhojdd-control">
        <div class="organization-select__value-container organization-select__value-container--has-value css-13y5847">
            <div class="organization-select__single-value css-1dc049i-singleValue">Text to Update</div>
            <div class="organization-select__input-container css-1azzn7d" data-value="">
                <input class="organization-select__input" autocapitalize="none" autocomplete="off" autocorrect="off" id="organization" spellcheck="false" tabindex="0" type="text" aria-autocomplete="list" aria-expanded="false" aria-haspopup="true" aria-controls="react-select-2-listbox" aria-owns="react-select-2-listbox" aria-errormessage="" role="combobox" value="" style="color: inherit; background: 0px center; opacity: 0; width: 100%; grid-area: 1 / 2 / auto / auto; font: inherit; min-width: 2px; border: 0px; margin: 0px; outline: 0px; padding: 0px;"/>
            </div>
            <div class="organization-select__indicators css-1wy0on6">
                <span class="organization-select__indicator-separator css-1okebmr-indicatorSeparator"/>
                <div class="organization-select__indicator organization-select__dropdown-indicator css-fkilnp-indicatorContainer" aria-hidden="true">
                    <svg height="20" width="20" viewBox="0 0 20 20" aria-hidden="true" focusable="false" class="css-8mmkcg">
                        <path d="M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"/>
                    </svg>
                    <span class="sr-only">Toggle Select Options</span>
                </div>
            </div>
        </div>
        <input name="organization" type="hidden" value="[object Object]"/>

This is one of the things I have tried so far, the other field to update looks exactly the same just has a data-value field included:

var dataContainer = document.getElementsByClassName('organization-select__single-value css-1dc049i-singleValue')[0];
var dataValue = parseInt(dataContainer.getAttribute('data-value'));
dataContainer.setAttribute('data-value', "updated value");
dataContainer.innerHTML = "updated value"
Blake Daniel
  • 45
  • 6

1 Answers1

0

How to set data attribute in vanilla js

On line 6 in your html, you have the following line:

<div class="organization-select__single-value css-1dc049i-singleValue">Text to Update</div>

On line 1 in your js, you try to hook into it by using this:

var dataContainer = document.getElementsByClassName('payer-select__single-value css-1dc049i-singleValue')[0];

However, the class names are not the same.

organization-select__single-value css-1dc049i-singleValue
payer-select__single-value css-1dc049i-singleValue
matabeitt
  • 160
  • 9
  • I updated the javascript. Apologies, there are two fields and I copied the example from the wrong one. – Blake Daniel May 24 '22 at 14:07
  • But again, the solution you gave is what I have tried and doesn't work properly. As mentioned above I can update the text on the webpage but it does not register as updating anything on the page. – Blake Daniel May 24 '22 at 16:17