Conceal different text when a div with a specific class includes particular text

Is there a way to dynamically add a class to a div based on the content of another div on the same page?

Here is a snippet of my HTML:

window.addEventListener("load", () => { let b = document.getElementsByClassName('aw-property-data-item')[0].innerHTML; b.includes("Verhuurd"); document.querySelector(".nf-form-cont").classList.add("displaynone"); });
<div class="aw-property-data-item">
<p><strong>Status:</strong>  Verhuurd</p>
</div>

<div id="nf-form-7-cont" class="nf-form-cont">
form content goes here
</div>

Although the code successfully adds the class displaynone, it seems to also do so for objects containing "Te Huur" instead of just "Verhuurd." I'm unsure why this is happening and would appreciate any guidance!

javascripthtmlcss

Answer №1

const checkVerhuurd = b.includes("Verhuurd"); 
if(checkVerhuurd) { 
    document.querySelector(".nf-form-cont").classList.add("displaynone"); 
}

By introducing a condition using the variable checkVerhuurd, you ensure that the class is only added when the specified condition is met.

Answer №2

It seems that your includes() method may be matching "huur" and including divs that contain "Te huur" along with the ones you want. You may want to consider adding another condition to make it more specific and exclude the divs you are not interested in.

window.addEventListener("load", () => {
    let content = document.getElementsByClassName('aw-property-data-item')[0].innerHTML;

    if (content.includes("Verhuurd") && !content.includes("Te")) {
        document.querySelector(".nf-form-cont").classList.add("displaynone");
    }
});

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

Using Ajax, the script triggers calls upon detecting keyup events on various input fields, each

I'm encountering issues while attempting to solve this logic puzzle. The page contains multiple fields and the goal is to store the input values in the database when the user finishes typing. Here's the code snippet: var debounce = null; ...

javascripthtmljqueryajax

Implementing a delete functionality within a loop on a JavaScript object array

I have a JavaScript object with the following structure: var partner = { p_name: { value: partner_name, label: "Name" }, p_id: { value: partner_ID, label: "ID" }, p_status: { value: partner_status, label: "Status" }, p_email: { value: partner_emai ...

javascriptjquery

ESLint version 8.0.0 encountered an error while attempting to fetch the '@typescript-eslint' plugin

Hey there, I'm in need of some assistance. I encountered an error while trying to build a project. Uh-oh! Something didn't go as planned! :( ESLint: 8.0.0 TypeError: Failed to load plugin '@typescript-eslint' specified in ' ...

javascripttypescripteslinttypescript-eslint

Sending a POST request to a Flask server using Stripe and AJAX

I am attempting to implement a function that triggers an ajax request when a stripe form is submitted. However, using the .submit() method doesn't seem to be working as expected. Here is my current code: HTML <form action="/download_data" method= ...

javascriptjqueryajaxstripe-payments

Error: React Beautiful D&D is unable to retrieve dimensions when no reference is specified

Hey everyone! I'm currently working on a meta form creator and having some trouble with performance issues. I created a sandbox to ask for help, but keep getting the error message "Cannot get dimension when no ref is set" when trying to drag a second ...

javascriptreactjsdommaterial-uireact-beautiful-dnd

What is the best way to retrieve the root binding node from a viewmodel in order to apply jQuery.blockUI when performing an AJAX post request?

Within my code, I have a designated DIV element that serves as the root node for applying knockout bindings like so: ko.applyBindings(viewModel, document.getElementById('myContainerDiv')); In all of my viewmodel types, there is a generic post m ...

javascripthtmlknockout.jsjquery-blockui

Developing web components using angular.js while ensuring compatibility with IE11

I have an angular.js application where I need to initialize a web component. Everything runs smoothly on different browsers, however IE11 seems to have problems with document.importNode The angular.js onInit function is as follows: vm.$onIni ...

javascriptangularjsinternet-explorercloneweb-component

Repeating a PHP variable within an angular scope

When working with PHP, any element prefixed with a $ is recognized as a variable. However, I encountered an issue when attempting to output an Angular statement using the following code: if(...) { echo "return $scope.id;"; } An error message indicated th ...

javascriptphpangularjsif-statement

"Struggling to upload an image using Selenium WebDriver because the element is not visible? Here are

ff.findElementByxpath(//object[@ id='slPlugin2']).click(); The element is not being recognized. Can you also provide guidance on how to upload media through webdriver? <table class="imgTable photoTable" cellspacing="0"> <div id="file ...

htmlselenium

Search for a JSON key/value pair in JavaScript/jQuery by partially matching a variable and returning the corresponding value

I am currently working on a project that involves searching through a list of models to find the corresponding URL for a specific one. Sometimes I may not have the full key or value, but I will always have at least a part that is unique. At the moment, my ...

javascriptjqueryjson

What is the best way to prompt users to submit comments with a popup textarea box?

Within my project, I have incorporated a dropdown list: <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select subject <span class="caret"></span> </but ...

javascriptjqueryhtmlcssforms

The CSS background and background-image are visible exclusively on the Chrome desktop browser

Why is the background image not showing up on my website? The img src is also not displaying. All pictures show up fine on Chrome desktop browser, but not on Chrome mobile browser. Other browsers that are not displaying the images include Safari mobile, I ...

htmlcss

Unable to dismiss message in Django

I'm a beginner in Django and I recently followed a tutorial to add message alerts to my code. The alerts are displaying correctly, but unfortunately, I am having trouble closing them using the 'x' button. https://i.stack.imgur.com/BQS1S.png ...

javascriptpythonhtmldjango

Adjusting image size within floating containers

I am working on a design with two floating divs, one on the left and one on the right, both nested within a main div. Each floating div contains an image that needs to be resized to the maximum size possible without differing sizes. This is what I curren ...

cssautoresize

Automatically execute a function when the number input changes, but only if no further changes are detected after a certain period of time

I am implementing angularjs with an input field for numbers. I want to trigger an action automatically after a certain amount of time, but only if no further changes have been made to the number within that time frame (let's say 2 seconds). In my exa ...

javascriptangularjs

Activate dynamic validation to ensure all necessary fields are completed before proceeding without the need to save

Is there a way to display the standard error message that appears next to required fields upon saving a form, without actually saving it? ...

javascriptdynamics-crmmicrosoft-dynamics

Step-by-step guide to utilizing instance functions in AngularJS

Recently I started working with angular in my project but I'm struggling to figure out how to access instance functions from the original code. Here is a snippet of my function: $scope.collapsedrow = true; $scope.PlusClick = function(event) ...

javascriptjqueryangularjs

Disabling prefetch in next.config.js: A comprehensive guide on eliminating data prefetching in Next.js

Typically, in many cases, the disabling of prefetching is achieved by specifically setting a link to not preload. An example of this can be seen below: <Link href="/about" prefetch={false}> <a>About us</a> </Link> My go ...

javascriptreactjsnext.js

Identifying a loop within a hierarchy of JavaScript elements

I am facing a challenge with a list of elements that have unique IDs and parent IDs. My goal is to identify any loops in this hierarchical structure and pinpoint the ID that initiates the loop. list = [ { id: '1', parent: '2' ...

javascriptarraystreegraph-theory

What could be the reason behind my useEffect() not triggering when updating a value in a React context?

How come my useEffect hook doesn't trigger when I update a dependency that involves a React context? In my project, the context is used within a wizard to gather user data and then process it on the final step. I am able to update the "Person" fields ...

javascriptreactjsreact-hooks