Develop Reference

bind svelte elements from {#html} directive

I'm trying to take user input and find all the texts that look something like this
>>523 like imageboards do. I convert these to HTML template strings through the regex replace method and sanitize the string. then I put the string in to svelte with {#html input}. It works very well but I have a few issues.
Here is the link to a REPL
https://svelte.dev/repl/737a125144474234a100cd871c1d4d5b?version=3.42.6
If you look in the console (for some reason it makes me use devtools console, repl console does not work) you can see it gets me the two a elements there, but the forEach method does not work
I want the created element to link to the referenced post. but one post can have many quote link elements in it. and I have no idea how to get a variable reference to them because I can't use {#each} and I tried this inside onMount:
let quotes = document.getElementsByClassName('postlink');
quotes.forEach((q) => {
q.addEventListener('mouseover', (e) => {
console.log('mousing over q:', q);
});
q.addEventListener('mouseout', (e) => {
console.log('mouse left q:', q);
});
});
console.log(quotes);
And it gives me a type error in the console.
Uncaught TypeError: quotes.forEach is not a function
How can I accomplish this? I want the mouseover and mouseout events to show a preview of the post the quotelink links to.

document.getElementsByClassname returns a NodeList object which doesn't have the forEach function defined, you can parse it to an array like this [...quotes].forEach

textContent returns undefined

I have a table in which I want to extract the text of the active item. I do this with the following code:
var addedWorkout = $("#custDropDownMenuA").find(".dropdown-item.active");
console.log(addedWorkout);
addedWorkout = addedWorkout.textContent;
console.log(addedWorkout);
The problem is that I keep getting undefined. I checked the console and it indeed finds the element I want without fail.
I am relatively new to Javascript, but after over an hour of Googling I could not find the issue and I don't understand why. I know that I can get the text element if I hardcore it using the following line:
document.querySelector("#selectiona1").textContent
but not with:
$("#selectiona1").textContent
What is the difference between these 2? I read that textContent is part of the DOM, to my understanding it relates to objects and according to my console i think it is an object. I made some crazy attempts like putting the object I got into the querySelector, but nothing works.

With this line:
var addedWorkout = $("#custDropDownMenuA").find(".dropdown-item.active");
you're using jQuery to select the .dropdown-item.active inside #custDropDownMenuA, and when you select with jQuery, you get a jQuery object in response. So, addedWorkout is a jQuery object, and jQuery objects generally do not have the same properties/methods as standard HTMLElements. (querySelector is the vanilla Javascript method to retrieve an element)
Either select the [0]th item in the jQuery collection to get to the first matching element:
var addedWorkout = $("#custDropDownMenuA").find(".dropdown-item.active")[0];
Or use the jQuery method to get the text of the first matching element, which is .text():
var addedWorkoutText = addedWorkout.text();
(note the use of a new variable - you will likely find it easier to read and debug code when you create new variables rather than reassigning old ones, when possible)

Your var 'addedWorkout' is a Jquery object, not a html element.
To show the text use:
addedWorkout.text();
Alternatively, you can change the 'addedWorkout' to a html element by adding the index [0], like this:
addedWorkout[0].textContent;

JQuery, html() on a table cell returns "undefined is not a function"

I've been having some problems with JQuery.
I have a HTML table with the names having the class .ulName
When I retrieve them with $('.ulName'), I have no problem. When I iterate over them with alert(), Chrome tells me they are indeed HTMLTableCellElement. But when I use the html() method on them, I get "Uncaught TypeError: undefined is not a function". I tried to use other methods to see how it would work (append() for example) but it did the same thing.
I also tried to change from a forloop to $.each but it did the same thing.
And finally, I also tried $.parseHTML but it returns null.
Here is the code source, I hope you can help me with my problem because I don't see why it wouldn't work. Thank you in advance for your answers.
$('#ulFilter').on('input', function () {
var uploads = $('.ulName');
for (var i=0; i < uploads.length; i++) {
alert(uploads[i].html());
}
});

Using the indexer gets the raw DOM element, not the jQuery object. See this question.
The raw element does not have a function called html, but instead a property called innerHTML.
Here are a few solutions:
using uploads.eq(i) instead of uploads[i]
using $(uploads[i]) instead of uploads[i]
using uploads[i].innerHTML instead of uploads[i].html()

$(".ulName") returns you a NodeList.
So you can use,
var uploads = $(".ulName");
$.each(uploads, function() {
$(this).html();
});

live function with out arguments in jQuery

I wanna select some item by jQuery which has been added after loading page,so I wanna use live() function.I used it before for clicking like following code:
$("selector").live('click')
but now when I wanna use it in another function.
but It will not work with out argument,like it live()
for e.g followin code will alert test (work)
var pos_eq=Math.abs($('.myList').css("left").replace("px","")/$('.myList').children('li').eq(0).css('width').replace("px","")) + 1;
alert("test");
but this will not.
var pos_eq=Math.abs($('.myList').live().css("left").replace("px","")/$('.myList').live().children('li').eq(0).css('width').replace("px","")) + 1;
alert("test");
how can I solve it?

You want a function, not a variable. It looks like you are trying to keep pos_eq up to date after elements have been added to the page. Having a variable auto-update when the DOM changes in the way you are trying to do is not possible with JavaScript. What you can do is use a function instead of a variable. This way whenever the value is accessed you are getting the latest value because it is computed on demand:
function pos_eq() {
var list = $('.myList');
var left = parseInt(list.css("left"));
var width = parseInt(list.children('li').eq(0).css('width'));
return Math.abs(left / width) + 1;
}
I broke your code up into multiple statements to make it more readable. You would use this function the same as you used the variable, but instead add parens to the end to invoke the function:
alert(pos_eq);
alert(pos_eq());

To get a set of objects at the time you need them, just do $("selector"). That will do a query at that time and get the set of objects. There is no need to use .live() in order to query objects on the page. It does not matter whether the objects were part of the original page or were added dynamically later. When you do $("selector"), it will search the contents of the current page and get you the objects that are currently in the page that match the selector.
There is no way to do a live selector query and save it and have it automatically update in jQuery or any other library I know of. The way you solve that issue with a dynamic page is that you just do a new query when you need current results.

The description of live() is: Attach a handler to the event for all elements which match the current selector, now and in the future. It does not give you a live node list despite its name. jQuery does not have any method that returns a live node list(such as those returned by getElementsByTagName etc.) as far as I know.

Adding elements to dropdownlist through javascript

Am unable to add elements to a dropdown list via Javascript.
The below piece of code works in IE and Chrome, but not in firefox.
ddlId.add(new Option("",0));
In firefox, I keep getting an 'Not enough arguments' exception. Any idea on how to resolve it? Thanks

try {
ddlId.add(new Option("",0), null); // standards compliant; doesn't work in IE
} catch(ex) {
ddlId.add(new Option("",0)); // IE only
}

Hm. The idea is, roughly, to go to the Mozilla Developer Center page for select.add() and have a look at the method signature ;-)
Syntax
select.add(newOption, existingOption);
Parameters
newOption An HTMLOptionElement to add to the options collection.
existingOption An existing HTMLOptionElement within the
collection used as a reference point
for inserting the new element; the new
element being inserted before the
referenced element in the collection.
If this parameter is null, the new
element is appended to the end of the
collection.

var opt = document.createElement("option");
var ddlPopulate=document.getElementById("<%=ddlPopulate.ClientId %>");
opt.text="firstElement";
opt.value="1";
ddlPopulate.options.add (opt);

The select element has as its children an options array. You add or remove options as you would using standard array methods.