如果页面上加载了某个 DIV，则使用 JavaScript 更改元素的显示设置

Question

I am very new to this and I'm having challenges with the way I type out my code.

Currently on my page there is the following button:

<a ng-if="vm.cart.canRequestQuote" href="/Rfq" class="btn primary btn-request-quote tst_cartPage_submitQuote" ng-bind="vm.cart.isSalesperson ? 'Create a Quote' : 'Request a Quote'" ng-disabled="vm.cart.isAwaitingApproval">Request a Quote</a>

I am trying to hide/show this button (using JavaScript) based on whether or not the following is loaded on the page:

<div ng-if="product.quoteRequired" class="quote-required">

Please help. I've tried a number of different scripts but I think because the button is a child of the div.tst_cartPage_buttons that I'm not typing the element out properly in JavaScript

Thank you for any guidance you can give.

Answer 1

you can use a jquery framework ( https://jquery.com/ ) and type:

if ($('#idOfElementToSearch')!=null) $('#elementToHide').hide()

the $ function is useful for easily finding the elements because it uses the css selectors

$('.btn .primary .btn-request-quote .tst_cartPage_submitQuote').hide()

hide all element that have this 4 class

or if you don't want use a framework you can use Document.getElementById() or getelementbyclass instead of $ function, but is more harder

Answer 2

Maybe you should try hidding the button with the same condition being used on your second element.

Something like:

<a ng-if="product.quoteRequired" href="/Rfq" class="btn primary btn-request-quote tst_cartPage_submitQuote" ng-bind="vm.cart.isSalesperson ? 'Create a Quote' : 'Request a Quote'" ng-disabled="vm.cart.isAwaitingApproval">Request a Quote</a>

Also, you are using AngularJS instead of Angular 2+. I would recommend moving into Angular 2+ (currently at 8 version) to get the best of type support with Typescript.