Develop Reference

How to select element by data area

I have this HTML form:
I'm writing a bot that he can go to the specific website and navigate to a certain page the image above where my bot confused. I need to select the first div data-area:"reslut1" and click on it to navigate to the next page
i'm using javascript with puppetteer chromuim
if anyone can help?
thank you

You are using the wrong selector, you are trying to find the element by class:
.result1
While you should be trying to select by data-area:
[data-area="result1"]
To perform a click on that element, you can use:
await page.click('div[data-area="result1"]');

I use featherlight for an image gallery, but it causes an error when I click on an input field in a form (not modal)

I have images appearing in a repeating region — each region is a recordset of an item in an auction.
Clicking the images loads a featherlight gallery. However, in each item's region, there is a form that the user can submit to make a bid on the item.
As soon as I click inside the input field before even entering a dollar amount with the form as of yet unsubmitted, somehow featherlight interferes and throws an error : "Featherlight: no content filter found (no target specified)".
To be clear : the form doesn't pop up in a modal window... and there is no connection between the form and featherlight apart from the fact that the form is inside the section that contains this : data-featherlight-gallery data-featherlight-filter="a.gallery".
I'm not sure why there is this interference in the first place.
I've searched online and some people have mentioned that using id may be the problem, so I have removed the text input's id and left only the name, but the error persists.
I found a page on github "forms with dynamic content impossible in featherlight?" at https://github.com/noelboss/featherlight/issues/122
but while the title sounds promising, the comments are mostly beyond me and don't seem to be relevant to my situation.
<form id="encanform<?=$cordre?>" name="encanform<?=$cordre?>" action="encan.php" method="post" onSubmit="storeValues(this);miseNote(<?=$latestbid+10;?>,'<?=$lang?>',this.form.miseamount.value)" class="encanclass">
<input type="text" required class="frmess" name="miseamount" title="This field is required." value="" />
var cordre = 'section#<?=$cordre?> a.gallery';
$(document).ready(function(){
$(cordre).featherlightGallery();
});
Any time I click the field, that error happens :
Featherlight: no content filter found (no target specified)
Even though featherlight is supposed to be bound only to a.gallery, the input field/form is catching its attention.
Thanks in advance for your time!

OK I finally managed to work it out. I had to remove the data-featherlight string that bound everything, even if I specified only links with class of gallery.
But removing it from the HTML and only apply the class to the image links and then specifying the correct selector in jQuery fixed it for me.
Thanks anyway!

If HTML "Product A" exists, change it to "Price A" using Javascript

Okay, I’ve been trying to workaround an issue here. I’ve got so far and I may not be heading in the right direction so if there’s a better way to approach this then let me know.
I’m using Dynamic Text Replacement on a platform called Unbounce to pull form dropdown data from a form submission on my page and then place it onto a confirmation popup overlay.
What I’d like to do next is replace the dynamic text with something different based on which answer from the form has been placed there (answers are limited to 5 specific selections from a dropdown).
Basically, when someone selects product A from the dropdown in the form they would be shown a price for product A in the confirmation dialog popup (instead of being shown ‘Product A’).
I’ve come across some text replacement javascript that I’ve used and tested successfully on the page.
<h3 id="title"class="lato dark bold title">certain text</h3>
<span class="orange size22"><b id="subtitle" >this text</b></span>
<script>
if (document.getElementById('title').innerHTML == "certain text" ) {
document.getElementById('subtitle').innerHTML = 'new text';
}
</script>
My hope was to add an ID to <ub:clientsidedynamic> for it to find at least one of my dropdown options such as ‘Product A’ and replace it with my desired price.
I changed the original dynamic text source code with:
<ub:clientsidedynamic class="text-editor-dynamic-tag" id="title" contenteditable="true" method="" parameter="window_type" title="URL Parameter: window_type" wrap="true">PRICE</ub:clientsidedynamic>
adding the ID of ‘title’ in a hope that it would work with my above Javascript.
Does anybody have any idea as to why this doesn’t work? Or if I’m even heading in a plausible direction with this.
Many thanks.

Editable Div - Highlights Specific Letter On Click

Everytime I click a div or I focus on a contenteditable div it highlights the text I've clicked. This is not the case for other sites I have tried so I know it's not my mouse, I have a fair amount of jquery and css so I don't think it's useful to post all the code. Could people provide suggestions/speculation to why it's doing this and how it could be fixed because at the moment I have no idea.. I have no specific code to highlight any text so I'm very confused.
Relevant Code:
//This is loaded on body load
$("body").click(function(el) {
if($("#menu").is(":visible")){
//The click handler function puts new textboxes in if clicked correctly.
clickHandler($(event.target));
}
<div class="container image">
<img src="https://placeimg.com/240/180/any" />
</div>

You can try
window.getSelection().removeAllRanges();
document.getSelection().removeAllRanges();
To make sure all your text is not selected.
Please take a look at these two entries:
How can I deselect text using Javascript or jQuery?
Select/Unselect Text on click Using jQuery

So I think this is actually a bug in chrome. After leaving it a few hours and then refreshing the page, it randomly started working with normal functionality. Thank you to everyone who attempted to help - guergana presents a possible solution if you have stumbled across this page looking for answers.

How to find/detect any textarea in page in javascript

(document.getElementById('textarea').length > 0) doesn't work. Does anyone know anything else other than this?
Will
Here is the scenario from my previous question which was unanswered. I have Rich text Editor(Openwysiwyg) which is loaded into textarea when I go to that particular page where textarea is placed. The function uses textarea id to identify textarea to replace it with Rich Text Editor(RTE). Now the script to call this function is in header part of the page. I select a drop-down option for sending email, so my textarea for email shows up. With this script added for RTE, my textarea for email is replaced by RTE and I can send formatted emails. So this works perfectly fine in Firefox. With IE7, RTE shows up even before I select drop-down option for email and this makes whole page messed up.When I select drop-down option for email, I just see normal text area and RTE still sitting at top of page.

document.getElementsByTagName('textarea').length > 0

You can use (note the plural form!)
var e = document.getElementsByTagName("textarea");
You can use jQuery as well:
$("textarea").each( function() { /* ... */ } );
EDIT:
I faced a similar problem once. I was using fckedit, and when I tried reading the value of my textedit (document.getElementById('blabla').value) I was getting null, even tough the rich text edit was ddefinetly showing something on screen.
It turns out that the fckedit API opens a new element on top of the textearea, and only when you navigate from the page is syncs it's internal data (which is on an iframe, if I am not mistaking) into the original textarea.
The moral of the story: if you are using some richtext API - use it's API to query the status of your "textarea". Hope this helps you, as I don't know the library you are using.
PS: I actually used $("blabla").val() ... which is also JavaScript... for some reason people think that jQuery is not javascript. Why is that?

Pure JavaScript (You can use this code)
textarea is HTML element tag
JavaScript :
if(document.getElementsByTagName('textarea').length > 0) {
}
HTML CODE:
<div class="flavor">
<div class="value">
<textarea name="name" rows="8" cols="80"></textarea>
</div>
</div>
<script type="text/javascript">
var flavorbox = document.getElementsByClassName('flavor')[0]
.getElementsByClassName('value')[0]
.getElementsByTagName('textarea').length;
alert(flavorbox);
</script>

Since openWYSIWYG generates a iframe on the fly, its not so simple to get/set its content.
I am currently working on changing these settings in the source. will post here a link as soon as i get the changes.