2

Can someone explain why the onclick propery doesn't show up or get injected? I need a way to click on this data.

Got a little test app here showing the issue

Look below to where I add the onclick property to the

  • That property never gets injected, although the ID property does 
    <script src="https://www.gstatic.com/firebasejs/4.3.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
    apiKey: "AIzaSyAgAShL4UzKAyNekPt92Y78Us684Fkhv4s",
    authDomain: "sample-e2b57.firebaseapp.com",
    databaseURL: "https://sample-e2b57.firebaseio.com",
    projectId: "sample-e2b57",
    storageBucket: "sample-e2b57.appspot.com",
    messagingSenderId: "304885560213"
};
firebase.initializeApp(config);
</script>

<html>
<body>

<ul id="singleBus-ul"></ul>

</body>
</html>


<script>
const singleBus = document.getElementById('singleBus-ul');

var ref = firebase.database().ref("dinosaurs");
ref.orderByChild("height").equalTo(25).on("child_added", function (snapshot) 
{
    console.log(snapshot.key);

    const li = document.createElement('li');
    li.innerText = snapshot.child("height").val();
    li.onclick = "location.href = 
    'http://stackoverflow.com/questions/3486110/make-a-list-item-clickable-
    html-css';" // ******** THIS DOESN'T SHOW UP !! ********** //
    li.id = snapshot.key;
    singleBus.appendChild(li);

})

    • Spinteractive
    • 251
    • 1
    • 4
    • 19
    • set it to a function? li.onclick = function(){return "hi"}; – Jay Lane Sep 21 '17 at 19:20
    • I set it to a function - location.href - does not change anything. So this works in plain HTML doc, but not using firebase. It's like Firebase doesn't insert that property. – Spinteractive Sep 21 '17 at 19:26
    • you set it to a string, has nothing to do with firebase. https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick you need to pass it a function or function ref – Jay Lane Sep 21 '17 at 19:29
    • What confuses me is that this works in a plain html doc and its a string
      • Make A List Item Clickable
       – Spinteractive Sep 21 '17 at 19:34
    • you're not assigning the attribute in this instance, you are adding an event handler. ie x.setAttribute('onClick','boo'); would show up on html – Jay Lane Sep 21 '17 at 19:35

    1 Answers1

    1

    You need to pass a function or function ref to onclick. Refer this

    Foe Example:

    li.onclick = ()=>{alert('hello')}
    Parag Jadhav
    • 1,853
    • 2
    • 24
    • 41
    Jay Lane
    • 1,379
    • 15
    • 28