Sprawdziłem To pytanie, ale nie używam angulara.

Oto mój dotychczasowy kod:

<button id='Bx' type="button" onclick='toggleClickedBuz("Bx", "#Bx")'>Bx</button>
<button id='By' type="button" onclick='toggleClickedBuz("Bx", "#Bx")'>By</button>
<button id='Bz' type="button" onclick='toggleClickedBuz("Bx", "#Bx")'>Bz</button>

Z moim JS w ten sposób:

function toggleClickedBuz( bizStr , id ) {
    if(clickedBusinesses.includes(bizStr)){
       // removing duplicate element from that array, dependant on button pressed
       clickedBusinesses = clickedBusinesses.filter( cb => cb !== bizStr );
       document.getElementById( id ).style.backgroundColor='white';
    }else{
        // else push it to the array
       clickedBusinesses.push(bizStr)
       document.getElementById( id ).style.backgroundColor='red';
    }
    console.log(clickedBusinesses)
}

Ale otrzymuję ten błąd:

Uncaught TypeError: Nie można odczytać właściwości „style” o wartości null

Pomimo tego w moim CSS:

.canvas .button-box button {
    border-radius: 2px;
    width: 10vw;
    margin-top: 0.5vh;
    background-color: whitesmoke;
}

Jakakolwiek rada?

2
AliShahVis 3 kwiecień 2020, 15:06

3 odpowiedzi

Najlepsza odpowiedź

Biorąc pod uwagę następujący kod HTML

<button id='Bx' type="button" onclick='toggleClickedBuz("Bx", "#Bx")'>Bx</button>

Przekazujesz #Bx jako argument id do swojej funkcji przełączającej. Powoduje to wywołanie js:

document.getElementById("#Bx");

Ale funkcja getElementById nie wymaga przedrostka #. Spróbuj zmienić swój kod HTML na

<button id='Bx' type="button" onclick='toggleClickedBuz("Bx", "Bx")'>Bx</button>

Naprawić obecny problem 👍

2
WoIIe 3 kwiecień 2020, 12:10

Nie potrzebujesz # w swoim przycisku. Tyle wystarczy:

<button id='Bx' type="button" onclick='toggleClickedBuz("Bx","Bx")'>Bx</button>
<button id='By' type="button" onclick='toggleClickedBuz("Bx","Bx")'>By</button>
<button id='Bz' type="button" onclick='toggleClickedBuz("Bx","Bx")'>Bz</button>

# to selektor CSS, który wybiera elementy HTML id. Możesz odwoływać się do nich w swoim CSS w ten sposób:

#Bx {
  color: #AAAAAA;
}
0
Ayman Arif 3 kwiecień 2020, 12:21

Proste, nie potrzebujesz # w toggleClickedBuz("Bx", "#Bx"). Umieść id bez #. Funkcja getElementById() już odwołuje się do id. Więc nie musisz określać przy użyciu #.

Twój kod HTML powinien wyglądać następująco:

<button id='Bx' type="button" onclick='toggleClickedBuz("Bx", "Bx")'>Bx</button>
<button id='By' type="button" onclick='toggleClickedBuz("Bx", "Bx")'>By</button>
<button id='Bz' type="button" onclick='toggleClickedBuz("Bx", "Bx")'>Bz</button>
2
BadPiggie 3 kwiecień 2020, 12:10