We have a website feature where the button text changes dynamically.
Here are the elements before the button text change:
<button _ngcontent-wex-c70=""
class="btn btn-wait buy font-family-title height-70 pp-sun-ins"><label _ngcontent-wex-c70="" translate=""
class="font-family-title label">BUY</label>
</button>
And here are the elements after the button text change:
<button _ngcontent-wex-c70=""
class="btn btn-root press font-family-title pp-sun-ins"><span _ngcontent-wex-c70=""
class="d-power power-column justify-content-center align-items-center"><label _ngcontent-wex-c70="" translate="">EXIT NOW</label><label _ngcontent-wex-c70=""
class="price"><span _ngcontent-wex-c70=""
class="cost">1.46</span><i _ngcontent-wex-c70=""
class="UNT"></i></label></span>
</button>
To extract the value of the cost, I use this method:
<script>
var cost = document.getElementsByClassName("cost")[0].innerText;
console.log("The cost is: "+cost)
</script>
This method works fine on the online JavaScript tester found at "https://jsfiddle.net/"
However, when using the Chrome browser, I encounter the following error:
Uncaught TypeError: Cannot read properties of undefined (reading 'innertext')
I have verified that the elements mentioned in "Elements after button text change" are indeed present using the Developer Elements Inspector.
In the Chrome browser console, I only execute the following code:
var cost = document.getElementsByClassName("cost")[0].innerText;
console.log("The cost is: "+cost)