Troubleshooting: InnerText not being retrieved in Mozilla Firefox

Check out my JavaScript snippet:

function chooseRow(objTR) {
    for (i = 0; i < ddlModalityList.options.length; i++) {
        if (ddlModalityList.options[i].text == objTR.cells[1].innerText.trim()) break;
    }

    ddlModalityList.options[i].selected = true;
    txtSSAETitle.value = objTR.cells[2].innerText.trim();
    txtSSName.value = objTR.cells[3].innerText.trim();
}

This code is part of a repeater. When a row is clicked, it sends the ID of the TR and displays the corresponding TD value in dropdown lists and textboxes. This code works smoothly in IE but encounters issues in Mozilla Firefox.

<tr onclick="chooseRow(this);">   
    <td class="csstablelisttd" style="display: none;" >
        <%#Eval("Acq_Modality_ID")%>
    </td>                     
    <td class="csstablelisttd" >                            
        <asp:Label ID="lblModality" runat="server" Text='<%#Eval("Modality")%>'></asp:Label>
    </td>

    <td class="csstablelisttd">
        <asp:Label ID="lblSchdledStAETitle" runat="server" Text='<%#Eval("Scheduled_Station_AE_Title")%>'></asp:Label>
    </td>
    <td class="csstablelisttd">
        <asp:Label ID="lblSchdleStationAEName" runat="server" Text='<%#Eval("SCHEDULED_STATION_NAME")%>'></asp:Label>
    </td>
</tr>

Answer №1

If you're using Firefox, keep in mind that it doesn't support the innerText property. Instead, you can use textContent. On the other hand, older versions of Internet Explorer do not support textContent, so you may have to use one and then fallback to the other option.

function getInnerText(el) {
    return el.textContent || el.innerText;
}

It's worth noting that even though they are not exactly the same, for most purposes, it should work just fine as mentioned here.

Answer №2

It is recommended to utilize innerHTML in place of innerText as innerText may not function properly in Firefox. The use of innerHTML is compatible with both browsers.

For more information, visit:

Answer №3

Firefox does not support innerText..

To overcome this, consider using jQuery
to simplify cross-browser compatibility concerns.
By incorporating jQuery into your code, it can be modified as follows:

function selectRow(objTR) {
    for (i = 0; i < ddlModalityList.options.length; i++) {
        if (ddlModalityList.options[i].text == $(objTR).children('td').eq(1).html().trim()) break;
    }

    ddlModalityList.options[i].selected = true;
    txtSSAETitle.value = $(objTR).children('td label').eq(2).html().trim();
    txtSSName.value = $(objTR).children('td label').eq(3).html().trim();
}

I have refrained from modifying the ddlModalityList portion since its functionality is unknown.

Answer №4

function chooseTableRow(tableRow) {
    for (index = 0; index < dropdownList.options.length; index++) {
        if (dropdownList.options[index].text == $(tableRow).children('td').eq(1).html().trim()) break;
    }

    dropdownList.options[index].selected = true;
    textTitle.value = $(tableRow).children('td label').eq(2).html().trim();
    textName.value = $(tableRow).children('td label').eq(3).html().trim();
}

Answer №5

Replacing all HTML tags in the content of the element with ID 'InputText' using JavaScript.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Class name that changes dynamically with a specific prefix

I am attempting to dynamically assign ng-model names so that they can be accessed in the controller using '$scope.numbers.no1', '$scope.numbers.no2', and so on. However, my current code is not producing any results: <div ng-repeat=" ...

The Bootstrap modal simply fades away without ever making an appearance

My bootstrap modal is not displaying on desktop, only showing a faded screen. It works fine on mobile and tablet devices. Any ideas why this might be happening? Here is the code: <button type="button" class="btn btn-primary" data-to ...

flatpickr allows you to synchronize the dates of two date pickers by setting the date of the second one to match the date

Currently utilizing flatpikr from . I'm looking to have the initial date of the return picker set to the same date as the outbound picker upon closing the outbound picker. The code I've written achieves this functionality, but there's an iss ...

Unable to load the node modules

In my development journey, I created an ASP.NET MVC project using Angular 2 in Visual Studio 2017 and set up node for package management. Here is a snippet from the package.json file: { "version": "1.0.0", "name": "asp.net", "private": true, ... ...

Does anyone know of a CSS/JavaScript framework that can be used to replicate the look and functionality of the iOS home

I'm wondering if there is a CSS/JavaScript framework that replicates the layout of an iOS home screen. I want to create a kiosk website with a grid layout similar to Android/iOS where apps can be displayed as icons. ...

The FuelUx scheduler forgets which day we've chosen when selecting weekly recurrence

When using the fuelUX scheduler, I noticed that after calling the method $('#myscheduler').scheduler("value","JSON VALUE") and selecting a weekly recurrence pattern, the information of the day gets lost. For example, if my input for the recurrenc ...

What steps can I take to eliminate the warning "Warning: Prop `style` did not match" that appears when I bring in the Image component in Next.js?

Hi there! I'm encountering a warning when trying to import an image using the Image component in nextjs. The warning message reads: Warning: Prop style did not match. Server: "display: block; max-width: 100%; width: initial; height: initial; ba ...

Ways to effectively manage multiple asynchronous operations while retrieving emails and attachments using IMAP and JavaScript

Currently, I am utilizing the IMAP library along with JavaScript to retrieve emails from a server. This is my approach: Retrieve emails based on email address, subject, and a specified time frame. Determine the total number of emails received. For each e ...

AngularJS directive: handling child elements

Is there a way to structure the directive below in order to have access to all the ul elements within the link function? In the code snippet provided, when examining the elm (logged in console), it appears as a comment type and ul are displayed as sibling ...

Experiencing difficulties with AngularJs as onblur event is not functioning properly when the input field is empty

I am currently working on a form that allows users to input data. I am facing an issue where if a user enters a number, deletes it, and moves away from the input field, it will display an error message. However, I want the error message to display only i ...

Ways to continuously monitor a div for a specific class

Is there a way to continuously check if an area has the class "top-nav" in order for the alerts to work every time it lacks or contains the class? How can I achieve this functionality? Check out the code on jsfiddle: https://jsfiddle.net/jzhang172/117mg0y ...

Having difficulty formulating a MongoDB query that includes a subquery

I have a dataset structured as follows: { "id": "02741544", "items": [{ "item": "A" }] }, { "id": "02472691", "items": [{ "item": "A" }, { "item": "B" }, { "item": "C" }] }, { "id": "01316523", "items": [{ "item" ...

Encountering a failure when trying to run npm in a React project

I've removed the .lock file and node_modules, then reinstalled, but it's still not working. Can someone assist me with fixing this? npm ERR! gyp ERR! node -v v16.13.0 npm ERR! gyp ERR! node-gyp -v v8.2.0 npm ERR! gyp ERR! not ok npm ERR! node-pr ...

What's the reason for switching from a custom tab icon to a React icon?

I've encountered a strange issue while working on my app - the tab icon keeps changing from the one I've set to the ReactJS icon whenever I navigate between different routes. I have linked the icon correctly in my HTML file, so I'm not sure ...

When pressing the next or previous button on the slider, an error message pops up saying "$curr[action] is not a

I found this interesting Js fiddle that I am currently following: http://jsfiddle.net/ryt3nu1v/10/ This is my current result: https://i.sstatic.net/VygSy.png My project involves creating a slider to display different ages from an array, such as 15, 25, ...

Can ng-submit be overridden?

Is there a way to modify ng-submit in order to execute certain functions before running the expression it contains? For instance, I want to: 1) Mark all fields as dirty or touched so that validation is performed on all fields, even if the user skipped som ...

Break up every word into its own separate <span>

I am currently facing an issue with displaying an array of strings in HTML using spans. These spans are wrapped inside a contenteditable div. The problem arises when a user tries to add new words, as the browser tends to add them to the nearest existing sp ...

Steps to access arrays that are embedded in a file and are loaded asynchronously

https://gyazo.com/e80eea9f69c0cbb52cc7929d0a46ea2f The name of the object is totalCount. How can I retrieve the count from it? Object.result was my first attempt, but it returned undefined. For my second attempt: var count = totalCount.resu ...

Getting data from an Ajax call

I am struggling to find a solution for retrieving data from a processing script into a Request page using Ajax and PHP. The issue I am facing is shown in the error message below: SyntaxError: JSON.parse: unexpected character at line 1 column 13 of the J ...

Struggling with smoothly transitioning an image into view using CSS and JavaScript

I'm currently experimenting with creating a cool effect on my website where an image fades in and moves up as the user scrolls it into view. I've included the code I have so far below, but unfortunately, I keep getting a 404 error when trying to ...