0

i have a javascript function that is going to change the text of the element in the font tag when i click it. I am trying to get the element by its id tag with jquery but when i console.log the jquery result it comes up as undefined. the all allWordsList variable is comming from python flask and i have confirmed that javascript is indeed receiving it properly the problem seems to be with this line var wordID = $(el).attr("id"); because it returns undefined when i console.log it

<script type="text/javascript">

    function changeText(el){
        var allWordsList = JSON.parse({{listFontsJ|tojson|safe}});
        console.log(allWordsList);
        var wordID = $(el).attr("id");
        console.log(wordID);
        var display = document.getElementById(wordID);
        display.innerHTML = '';
        display.innerHTML = allWordsList[wordID]["english"];

    }
  

</script>

<font id="1" size = '10' color = "red" onmousedown= "changeText()"> hello </font>

Mattytripps
  • 57
  • 7

1 Answers1

1

First, your code is using elements and attributes that are either deprecated (like font), no longer needed (like type=text/javascript) or legacy and not standard (like onmouseover).

You should not be using HTML event attributes like onXyz and instead be separating your HTML from your JavaScript and do your event binding in JavaScript. And then, if the event handler is executing as a result of interacting with a DOM element, you can just use this to refer to the element that triggered the event.

Also, it makes no sense to clear the innerHTML of the element and then on the very next line to set it. Just set it. But, really, you should avoid .innerHTML when you can (which is almost always) because it has security and performance implications. And you're not even setting the text to any HTML anyway. Instead, use .textContent.

And, the font tag is deprecated. You should be setting the size and color of text with CSS and wrapping your text in valid elements, like div or span.

Lastly, while and id that starts with a number is valid in HTML5, CSS won't recognize those ids. It's better to give your elements an id that starts with a letter and is meaningful. If you need a number to be associated with the element, it's better to use a data-* attribute.

Here are all of those suggestions put together:

#item1 { font-size:20px; color:red; }
<div id="item1" data-index="1"> hello </div>

<script>
    let allWordsList  = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul" ];

    document.getElementById("item1").addEventListener("mousedown", changeText);

    function changeText(){
       // Set the text to the data-index value of the HTML element:
       this.textContent = allWordsList[this.dataset.index];
    }
</script>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • i tried what you said but the problem is definitely with var wordID = $(el).attr("id"); because if i set var wordID = 1 then it works – Mattytripps Feb 13 '21 at 14:17
  • @Mattytripps See my updated answer with working code. The problem was that you were using an inline HTML event attribute, when you should be doing event binding in JavaScript. – Scott Marcus Feb 13 '21 at 14:37
  • the only problem with the solution that you gave me above is that im generating the html with a for loop in python so i cant have the id = item1 because i dont think that i can generate a bunch of #item1 #item2 #item3 tags in css. Each word needs to be colored differently and displayed on the same line as if it is one p tag rather than individual words – Mattytripps Feb 13 '21 at 16:42
  • im sending this to javascript ```Я хочу``` each word needs its own id – Mattytripps Feb 13 '21 at 16:43
  • this definately helped me. though im not quite out of the woods yet. but my code has substantially improved because of your input. Could you take a look at this question that I posted here, if you have a chance? https://stackoverflow.com/questions/66191845/javascript-on-click-change-the-html-of-an-element-different-than-the-one-that-w – Mattytripps Feb 14 '21 at 02:22