Can I append Icons in JavaScript as text content - javascript

I have button which is created using JavaScript
const deleteButton = document.createElement('button')
I want to append the delete/trash Icon, the below code is working
deleteButton.classList.add('far', 'fa-trash-alt')
but the Thing is I only want to append the icon only, rather then a button, can anyone know how we can do it, but catch is it should be button because the button has assigned to function

You can create a span instead a button, try this:
let deleteSpan = document.createElement('span');
deleteSpan.classList.add('far', 'fa-trash-alt')

Related

Getting parent classess from innerText element

I'm not extremely familiar with puppeteer and node.js but need to do this ...
Need to click on button which has span element. Button and span doesn't have ids, classes are changed with every page load. Only what is certain is text "Login" inside span element.
Button type is submit and I can find it thru that but submit doesn't run all js on that button like with click.
<button class="But_case_8U1 Log_but_dCL">
<span class="ButChild_3Jw">Login</span>
</button>`
I tried watch some tutorials and examples but all puppeteer and node.js examples are simpler than my problem.
You can use The Login text if you have only one element button with text Login in you page like this:
const [button] = await page.$x("//button[contains(., 'Login')]");
if (button) {
await button.click();
}

Vanilla JavaScript toggle element with text to editable element on edit button click

I'm trying to make my first vanilla JavaScript app which is (surprisingly :D) To-Do App
I'm currently stuck with the update todo part,
I got this part of code doing to-do creation
let createTodo = (todo) => {
let span = document.createElement('span');
span.classList.add('text');
spanParent.prepend(span);
span.innerHTML += `${todo.text}`;
let edit = document.createElement('span');
edit.classList.add('edit');
spanParent.append(edit);
edit.addEventListener('click', (e) => {
console.log(e);
});
let editIcon = document.createElement('i');
editIcon.classList.add('fa-solid');
editIcon.classList.add('fa-pen-to-square');
edit.prepend(editIcon);
};
I want that when user click edit the todo text turn to editable input and save new value on enter or clicking outside and it become not editable again until pressing edit
I did some research and come across (contentEditable) attribute , but when tried to apply it things went sideways,
when i turn it on the edit icon disappear and the text stay editable
i think i need to do some kind of form that show on edit but don't know how to approach this idea
EDIT
I'll try to explain more clearly hopefully,
I need to make the to-do text to be:
1- editable when user click the edit button
2- save the new user input text
3- become non-editable once user save updates
4- become editable again if user press edit button again
Thanks in advance
Based on the description that you provided, there is technically no need of using a form. You could stick to a standalone button and give it a click handler.
The click handler of this EDIT button works as follows: it sets the contenteditable attribute on the to-do text element (the span element above). This makes the text editable.
Then when the SAVE button is pressed, you should do the following: get the textContent of the span element, store it locally (I guess you're using localStorage) and then finally remove the contenteditable attribute from the span element.
BTW, I feel that there is a lot of room of improvement in your code, for e.g. in variable naming, in the usage of methods, and in the order of statements:
append() and prepend() is, more or less, meant for bulk-insertion of nodes into the DOM. In your case, you have just one single node to add and so you could just stick to using insertBefore() or `appendChild().
Most probably, the to-do text is styled as a block in your application. Hence, it's better to make it a <div> element, instead of a <span>.
There is an awesome resource to learn about the HTML DOM, along with exercises to practice your skills: HTML DOM Introduction — CodeGuage.

contenteditable cancel push elements

Hey friend, I need help...
I made page with div "contentEditAble" and I want to cancel push divs / br / p
and stay it empty from elements after it's do function because it's do function that create massage like in "What'sApp Web" ...
The first lines (1-6) doesnt work to click enter but if clicking "send" button its work...
But please first you open the link in the div with contenteditable click at least twice timesenter and you will Understand the problem...
You can see the link: jsfiddle.net/sarelyuval/nL1rbeL9
Thank you!
var t = document.createTextNode(input.textContent); // line no 56
instead of input.innerHTML you need content input.textContent
I forgot to say, I want to add for it also Images (icons...)
so I need only cancel push the divs and br in chrome

Get product name from parent element

Here I am trying to get the product name in alert box when the "Buy now" button is clicked. Also I need to maintain the onclick event of the button for which I have placed the code in jquery.
<h2 class="product-name">Sample Product Name</h2>
http://jsfiddle.net/LkKbz/
The approach that I did is giving me blank alert box might be because I am calling parent element. Please help
Please note that here I don't want the alert when product name or image is clicked. Just want on button
Change this:
var text = $(this).parents(".item").find('.product-name').text();
here is answer
var text = $(this).parents('li').first().find('.product-name').text();
http://jsfiddle.net/LkKbz/1/

Get current div and add html

I created on page where there is editable content.
I want to give user chance to add data on that page.
like, if they click 'textbox' there is will textbox in certain div.
but now if they add div and then inside that div, they want to add anything than how its possible ?
How can get current div(where my mouse current position), so if i select particular div which is editable, than they can add textbox inside it in.
checkout fiddle, there is something like document.activeElement but its not working.
so how to get current div and add element into that particular div only.
When my mouse is in particular div / form than i want to add textbox / h1 should be added in particular that div / form.
P.S.
I need to get Id of my current cursor position.
if my cursor is inside form1 than i should get form1 and append html inside that.
i cant use $(this) because, this will return me where i clicked, not where my cursor position is.
apply this it works
$(document).ready(function(){
$(".addForm").on("click", function(){
var current = $(this);//use $(this) at the place of document.activeElement
var myCurrentId = this.id;// here can also use $(this).attr("id");
$(".uiHTML").append("<form id='1' contenteditable='true'></form>");
});
$(".addH1").on("click", function(){
var current = $(this);
var myCurrentId = this.id;// here can also use $(this).attr("id");
$(".uiHTML").append("<h1>Hello</h1>");
});
});
see demo

Categories

Resources