I'm pretty much brand new to RxJS and I need to change my onClicks to myEvents, I'm having a problem where I cannot interact with buttons that are created in the JS since they are not created in the HTML. The project is a simple note-taking app. TIA!
stackblitz:https://stackblitz.com/edit/js-w9lthb?file=index.html
fromEvent(button, "click").subscribe(() => {
i++;
j++;
let NotesArea = document.getElementById("NoteArea").value;
let Colour = document.getElementById("colours").value;
NotesArray.push(NotesArea);
document.getElementById("NotesCollection").innerHTML += ("<div id=\"Div"+ i +"\" > <button id=\""+ i +"\">Edit Note</button> <button id=\""+ i +"\">Delete Note</button><div id = \"Note"+ i +"\" > <p>" + NotesArea + "</p> </div></div>");
document.getElementById(("Note"+i)).style.backgroundColor = Colour;
const editbutton = document.getElementById(i);
const deletebutton = document.getElementById(i);
})
fromEvent(editbutton, "click").subscribe(() => {
j = id;
document.getElementById("Note"+j).innerHTML += ("<textarea id=\"EditArea\" name=\"EditArea\" rows=\"3\" cols=\"30\"> </textarea> <button onclick=\"SubmitEdit(EditArea, i)\">Submit edit</button>");
const submitbutton = document.getElementById(i);
})
fromEvent(submitbutton, "click").subscribe(() => {
let varofAdd = val.value;
NotesArray[i] = varofAdd;
document.getElementById("Note"+j).innerHTML = ("<div id = \"Note"+ i +"\" > <p>" + varofAdd + "</p> </div>");
})
fromEvent(deletebutton, "click").subscribe(() => {
let DivNum = id;
console.log(DivNum);
document.getElementById("Div" + DivNum).innerHTML = " ";
})
RxJS declaring everything in variables on start of your application. If you change your source listener dynamically, - you should recreate the stream.
For example:
const editbutton = new BehaviorSubject(yourInitHTMLButtonOrNull);
editbutton.pipe(switchMap(buttonElement => fromEvent(buttonElement, "click"))).subscribe(() => {...});
Same for other you dynamic buttons. Also you should change this buttons as a Subject values:
fromEvent(button, "click").subscribe(() => {
i++;
j++;
...
editbutton.next(document.getElementById(i));
deletebutton.next(document.getElementById(i));
})