Change value of textarea when hovering link - javascript

I would like to change the value of a textarea when hovering over a link. I am not very proficient at javascript and do not quite understand the intricacies of 'this.' and 'document.' etc..
Currently I have a textarea 'info' that on page load is unpopulated and two links that should change its value. I can not seem to get it to work..
<textarea name="info"></textarea>
Foo.com
Bar.com
I'm sure there is a way to accomplish what I need to do but I can't find it.
Thanks in advance.

Create a function, that accepts the string you want, and sets the textarea:
// Select the textarea by its ID (that you need to give it)
var textarea = document.getElementById('info');
// Define the function that sets the value passed
function changeTextarea( str ) {
textarea.value = str;
}
Assign an ID to the textarea, and call the function in the onmouseover, passing the string you want to set:
<textarea name="info" id='info'></textarea>
Foo.com
Bar.com
Example: http://jsfiddle.net/nmZb9/

Related

How to find a varible html element executing javascript in python

I'm trying to use 2Captcha service to solve an h captcha V2.
Works like this:
you get a value to solve the captcha
Then you find a textarea element in the HTML code to insert that value (here's my problem)
you insert the value in that element
You press submit button and the captcha is solved
First I'm going to present a working example, then I'll present where I have the problem.
This is the HTML code to find and insert the obtained value:
textarea id="h-captcha-response" name="h-captcha-response" style="display: none;"></textarea>
This is the python code used to insert the value:
value = get_value()
insert_solution = 'document.getElementById("h-captcha-response").innerHTML="' + value + '";'
driver.execute_script(insert_solution)
What this exactly does is taking you from this:
and this is the result:
Finally you press the submit button and it's done. This example works
This is my problem:
In my case the HTML document has a variable ID, like this one:
<textarea id="h-captcha-response-0tesbrpxsk8" name="h-captcha-response" style="display: none;"></textarea>
Notice that the id has an alphanumerical part (0tesbrpxsk8) that always changes making it more difficult to select.
I tried to find some regular expression to use inside of document.getElementById()
With no success
I also tried to use:
document.getElementByTagName("textarea").innerHTML=".....
I'm stucked here and tried other approaches with no success because I probably because I don't implement well those solutions or they just don't work.
I'll appreciate some insights, thanks
This will fill out all of those (recaptcha / hcaptcha):
driver.execute_script('''
let [captcha] = arguments
[...document.querySelectorAll('[name="h-captcha-response"],[name="g-recaptcha-response"]')].map(el => {
el.innerHTML = captcha
})
''', value)
Try this:
const textarea = document.querySelector('[id^="h-captcha-response-"]')
textarea.value = "This is inside the textarea!"
<textarea id="h-captcha-response-0tesbrpxsk8" name="h-captcha-response"></textarea>
First of all: You set the value of an textarea with textarea.value = "some value"
You should use document.querySelector() to select elements. (You have much more abilities there)
You can select id starting with, with this query: [id^="start"]

Is there a to change the value of an element using JavaScript

I'm trying to change the value of an element on a third-party web page using a JavaScript Add-on to display a hyperlink
I already have the link on the page i would like to be able to click it
I think I'm on the right track using document.getElementById although I'm not sure how to then change the id into a "a href" and then how to pass it back into the value.
Sorry, this is a bit of a tricky situation so I'll try my best to explain it. On a third-party web-page which we use for our HR related tasks, there is a section titled "File Link" although this isn't a link. When you copy and paste the address into a browser it displays the file. What i am trying to do is create a hyperlink on the "File Link" section to remove the need to copy and paste the link. Because this is a third party website. We have access to the JavaScript on the website and need to change the address into a hyperlink. I'm not entirely sure this is possible.The element id is "__C_cb_file_link" and i would like to insert the link address into the element using a variable then add the link parameters into the variable then reinsert it into the element/value.
function linkIt() {
var intoLink = document.getElementById("__C_cb_file_link");
var hLink = "<a href="+intoLink+"</a>;
intoLink.value = hLink;
}
window.onload = linkIt();
<td><div class="sui-disabled" title="">m-files://view/37FF751C-A23F-4233-BD8B-243834E67731/0-46524?object=C46A7624-D24B-45F3-A301-5117EFC1F674</div>
<input type="hidden" name="__C_cb_file_link" id="__C_cb_file_link" value="m-files://view/37FF751C-A23F-4233-BD8B-243834E67731/0-46524?object=C46A7624-D24B-45F3-A301-5117EFC1F674"/></td></tr>
In below code first we read input value with new link (however we can read this value from other html tags), then we remove this element (and button) and add to parent element (of removed input) the new link
function linkIt() {
let intoLink = __C_cb_file_link.value;
let parent = __C_cb_file_link.parentNode;
__C_cb_file_link.remove();
btn.remove();
parent.innerHTML += `${intoLink}`;
}
<input id="__C_cb_file_link" value="https://example.com">
<button id="btn" onclick="linkIt()">Link It</button>
There are a number of issues with your code:
1) The code snippet in your question doesn't run because of a missing " at the end of the second line of the linkIt() function.
2) intoLink is a hidden field so anything you add to it will not be visible in the page
3) Even if point 2 were not true, setting the value of a form field will not cause HTML to appear on the page (at best you might get some plain text in a textbox).
4) "<a href="+intoLink+"</a>" doesn't work because intoLink is a complex object which represents the entire hidden field element (not just its value property). You can't convert a whole object into a string directly. You need to extract the value of the field.
A better way to do this is by creating a new element for the hyperlink and appending it to the page in a suitable place. Also I recommend not adding your event via onload - when written using this syntax only one onload event can exist in a page at once. Since you're amending another page which isn't under your control you don't want to disable any other load events which might be defined. Use addEventListener instead, which allows multiple handlers to be specified for the same event.
Demo:
function linkIt() {
var intoLink = document.getElementById("__C_cb_file_link");
var hLink = document.createElement("a");
hLink.setAttribute("href", intoLink.value);
hLink.innerHTML = "Click here";
intoLink.insertAdjacentElement('beforebegin', hLink);
}
window.addEventListener('load', linkIt);
<td>
<div class="sui-disabled" title="">m-files://view/37FF751C-A23F-4233-BD8B-243834E67731/0-46524?object=C46A7624-D24B-45F3-A301-5117EFC1F674</div>
<input type="hidden" name="__C_cb_file_link" id="__C_cb_file_link" value="m-files://view/37FF751C-A23F-4233-BD8B-243834E67731/0-46524?object=C46A7624-D24B-45F3-A301-5117EFC1F674" /></td>
</tr>
P.S. m-files:// is not a standard protocol in most browsers, unless some kind of extension has been installed, so even when you turn it into a hyperlink it may not work for everyone.
[UPDATE] I supose that your "__C_cb_file_link" was a paragraph so I get the previous text http://mylink.com and create a link with, is it what you want, right?
function linkIt() {
let fileLink = document.getElementById("__C_cb_file_link");
let hLink = fileLink.textContent;
fileLink.innerHTML = ""+hLink+"";
}
linkIt();
<div>
<p id="__C_cb_file_link">http://myLink.com</p>
</div>

new textarea onfocus is not working

i have this interface :
When the "Add Another One" button is clicked, i will have to add another interface that looks the same as this one, so that the whole interface would look something like this :
I had the attribute onfocus for the textarea in order to clear it content when in focus, and it is working prefectly, this is the code for it :
<textarea name="educationDescription1" id="educationDescription1" rows="5" cols="33" onfocus="clearContents(this);">Describe your studying experience in a couple of sentences.</textarea>
Now I'm having problems doing the same for the created textarea, although i have used the same syntax! This is the code used for creating the new text area :
var node6 = document.createElement("textarea");
node6.rows="5";
node6.cols="33";
node6.onfocus="clearContents(this);";
node6.value="Describe your working experience in a couple of sentences.";
node6.name="experienceDescription"+experiences;
node6.id="experienceDescription"+experiences;
Any idea what could be the problem?
Thanks
In node6.onfocus , onfocus needs a function reference. You are assigning a string. It should be something like,
node6.onfocus=function(){clearContents(this);};
Or you can use addeventListner function
node6.addEventListener('onfocus',function(){clearContents(this);});
Or if you want to add onfocus into the html you have to create a new attribute and set it like this.
var attr = document.createAttribute('onfocus');
attr.value="clearContents(this)";
node6.setAttributeNode(attr);
This:
node6.onfocus="clearContents(this);";
Should be replaced by this:
node6.onfocus=function(){clearContents(this);};
I guess you might want to use placeholder attribute instead of onfocus.
If you use onfocus, the textarea would be cleared everytime the user make a focus on it even after the user input valid data.
The code to set placeholder with jQuery could be something like this:
var node6 = $("<textarea></textarea>");
...
node6.attr('placeholder','Describe your working ...');
Here is the fiddle.
http://jsfiddle.net/naokiota/j687tg80/2/
Hope this helps.

Why are only some attributes updated from my javascript function?

I have a button script to change the buttons in a frame based on the page loaded in the main frame. The problem I'm experiencing is that while the background images, tabindex and text on the button (innerHTML) all change as expected, the onclick doesn't. It appears to completely ignore it. Here's the script I'm using:
function createbutton(btn_N, btn_I, btn_L, btn_D) // (Div Name, Tab Index, Button Text, Page To Load){
var btnN = top.frames['buttonbar'].document.getElementById(btn_N);
btnN.style.cssText = "display:block; cursor:pointer; padding-left:16px; padding-top:5px;";
btnN.onmouseover = function() {this.style.backgroundImage = "url('./osdimages/navBG_roll.png')";};
btnN.onmouseout = function() {this.style.backgroundImage = '';};
btnN.tabindex = btn_I;
btnN.innerHTML = btn_L;
btnN.onclick = btn_D;
}
The button call looks like this:
createbutton("button01", 1, "New Order/Browse", "parent.frames['content'].location.href='createorder/createorder.asp';");
There is a difference between attributes and properties.
The best example of this is as follows:
HTML: <input type="text" value="hello" id="test" />
Type something in the text box
document.getElementById('test').value is whatever you typed
document.getElementById('test').getAttribute("value") is whatever was in the HTML
Some attributes are directly mapped to properties and vice versa, but this is not always the case.
For instance, the onClick attribute takes a string that is then eval'd, but the onclick property takes a function. This is why your code isn't working.
Either pass a valid function, or use setAttribute.
You are setting onclick with a string, it needs a function to execute.
createbutton("button01", 1, "New Order/Browse", function(){ parent.frames['content'].location.href='createorder/createorder.asp'; });

Javascript Stopwatch Insert into HTML

I've been looking at this code:
http://www.jquery4u.com/jquery-date-and-time-2/online-jquery-stopwatch/
I'm trying to understand exactly how it is working because I'd like a timer on a page I'm working on.
I can't for the life of me work out where the value of the timer is added to the input "disp" and how I could put this into a regular text, not a form input.
The only thing I can see that refers to it is:
t[6]=document.getElementById('disp');
Can anyone help me understand this please,
Thanks
You've correctly identified that they use t[6] to refer to the HTML element. But to set it, earlier on there is:
function disp() {
if (t[2]) t[1]=(new Date()).valueOf();
t[6].value=format(t[3]+t[1]-t[0]);
}
Since t[6] is the form input, they set the value of the form input to the formatted time. If you wanted to use some other element, e.g. <div id="myTime"></div>, you could say instead:
function disp() {
if (t[2]) t[1]=(new Date()).valueOf();
document.getElementById("myTime").innerText = format(t[3]+t[1]-t[0]);
}
Which changes only the last line, so that you may set the text of your div.

Categories