Highlight my selected 3D buildings in ArcGIS JavaScript API

Question

I tried to query and select my 3D buildings related to their names or heights and can achieve the selection but I want to highlight selected ones. How can I do that?

Or is there any better way to select them?

JavaScript code:

 document.getElementById("first").addEventListener("click", function (event) {
 extrudedBuildings.definitionExpression = "Tipi = 'Mühendislik'"; 
 });
 document.getElementById("second").addEventListener("click", function (event) {
 extrudedBuildings.definitionExpression = "Tipi = 'Özel'";
 });
 document.getElementById("third").addEventListener("click", function (event) {
 extrudedBuildings.definitionExpression = "Tipi = 'İİBF'";
 });
 document.getElementById("fourth").addEventListener("click", function (event) {
 extrudedBuildings.definitionExpression = "Tipi = 'Resmi'";
 });
 document.getElementById("fifth").addEventListener("click", function (event) {
 extrudedBuildings.definitionExpression = "Tipi = 'Rektörlük'";
 });
 document.getElementById("sixth").addEventListener("click", function (event) {
 extrudedBuildings.definitionExpression = "Tipi = 'Yemekhane'";
 });
 document.getElementById("seventh").addEventListener("click", function (event) {
 extrudedBuildings.definitionExpression = "Tipi = 'Kütüphane'";
 });

HTML Code:

 <div id="topbar_4">
 <button id="first" class="esri-button esri-button--primary">Mühendislik Binaları</button>
 <button id="second" class="esri-button esri-button--secondary">Özel Binalar</button>
 <button id="third" class="esri-button esri-button--primary">İİBF </button>
 <button id="fourth" class="esri-button esri-button--secondary">Resmi Binalar</button>
 <button id="fifth" class="esri-button esri-button--primary">Rektörlük </button>
 <button id="sixth" class="esri-button esri-button--secondary">Yemekhane </button>
 <button id="seventh" class="esri-button esri-button--primary">Kütüphane </button>
 <table width="100%">

Answer 1

Set the value attribute and use that in the definition query and add in a common class. You can then query all the buttons to add listeners to them in a loop using that common class and use the value in the definition expression.

HTML

<button id="first" class="esri-button esri-button--primary definitionExpression" value="Mühendislik Binaları">Mühendislik Binaları</button>
<button id="second" class="esri-button esri-button--secondary definitionExpression" value="Özel Binalar" >Özel Binalar</button>
<button id="third" class="esri-button esri-button--primary definitionExpression" value="İİBF">İİBF </button>

Javascript

document.querySelectorAll('.definitionExpression').forEach(item => {
 item.addEventListener('click', event => {
 extrudedBuildings.definitionExpression = `Tipi = '${event.target.value}'`;
 })
});