Using Javascript to write HTML inputs which call Javascript functions - javascript

I'll give you an example of what I'm trying to do.
In Javascript:
document.innerHTML += "<input type='button' id='moveButton' value='a' onclick='webInput('a');'>"
The problem is that the html being written has two levels of quotes, and I can't figure out how to format the second level of quotes here:
webInput('a')
In my Javascript file, I have one function write the inputs into the HTML at the end of the function, then clicking the inputs calls the next function, until eventually the inputs are rewritten.
I know the answer probably has something to do with Escape Characters, but I was confused as to how to format them because the text is being passed back and forther between Javascript and HTML, which use different Escape Characters.

You can create your button within the javascript code and define the method therein.
var button = document.createElement('button');
button.addEventListener('click',function(){
doSomething();
});
//This method adds your button to body
document.body.appendChild(button)

If you have requirements to add this as string to the document, you need to escape quotes:
"<input type='button' id='moveButton' value='a' onclick='webInput(\"a\")'>"
great answer with rules for escaping here: https://stackoverflow.com/a/16134942/5727598
Also, you should use innerHtml property for element in which you want to pass your string but be sure it will remove all content there;
If no requirements, create button and upend to the body:
var input = document.createElement('input');
input.type = 'button';
input.id = 'moveButton';
input.value = 'a';
button.addEventListener('click', function(){
webInput(this.value); //if you need to pass input value as parameter
})
document.body.appendChild(input);

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"]

htmlencode a string in javascript

Hello I have a function that loops around and then eventually a string gets sent to a DIV tag class...
$(document).ready(function addcopy() {
/* global */
$(".Bands").append('<div style="display: inline-block;">[EDIT] <h7 style="color:#7A0029;line-height: 110%;text-transform: uppercase;">[Custom:Name]</h7> </div>');
});
It works fine... however the token [Custom:Name] may contain special characters such as single or double quotes etc...
I've looked around these forums and tried to adapt my code to various solutions offered and it never seems to work, could somebody help me?
Thanks for your help!
Alex
EDIT(1):
Getting somewhere, from Ockert's and LeFex's answer I've adapted it below but it still does not work (replace speech marks and special characters from token which html can't handle)...
function htmlEncode(value){
return $('<div/>').text(value).html();
}
$(document).ready(function (){
/* global */
var band = $("<div style='display: inline-block;'>[EDIT] <a href='[LINK]'><h7 class='name' style='color:#7A0029;line-height: 110%;text-transform: uppercase;'>[Custom:Name]</h7></a> </div>");
band.appendTo(htmlEncode('.Bands'))
});
You can change your script too
$(document).ready(function (){
var band = $("<div style='display: inline-block;'>[EDIT] <a class='link' href='[LINK]'><h7 class='name' style='color:#7A0029;line-height: 110%;text-transform: uppercase;'>[Custom:Name]</h7></a> </div>");
band.find('.name').html("some weird name !##$%^&*");
band.find('.link').attr("href","http://www.google.com");
band.appendTo('.Bands');
});
By splitting it up like that, enables you to set the name to anything you want. You can easily select the name element
Have a look at this jsfiddle http://jsfiddle.net/fL3gn056/2/
You could use document.createElement instead of just appending a string.
http://www.w3schools.com/jsref/met_document_createelement.asp
If you just create your div, a and h7-elements, use the appendChild function, and add style and attributes and content by setting element properties, you should end up with a sollution that allows any special characters.
Edit:
I could'nt get it working using that method; however, with the approach I suggested above, i got some working code:
var element = document.createElement("div");
element.style.display = "inline-block";
var link = document.createElement("a");
link.setAttribute('href', "[LINK]");
var text = document.createElement("h7");
text.style.color = "#7A0029";
text.style.lineHeight = "110%";
text.style.textTransform = "uppercase";
text.innerHTML = "[CUSTOM:NAME]";
//not sure what you're appending it all to, but do it here
document.getElementsByClassName("Bands")[0].appendChild(element);
element.appendChild(link);
link.appendChild(text);
With this snippet, all input special characters are interpreted as a string, not as code. Some calls I could have put in the same line, but this way you get an easy to read overview.
Here's an earlier thread on the subject, and the top answer brings the issue of performance of different approaches to discussion.
jQuery document.createElement equivalent?

Using HTML attributes in javascript

I am a beginner in javascript. I'm trying to add a function to generate new form elements using javascript, on a page that's generated in php.
The code works in creating new <tr>, <td>, <input type="text"> html elements. However when I try to create buttons using css styles, I find that the styles are lost from the tags.
if(document.createElement)
var tr = document.createElement("tr");
var input = document.createElement("input");
// If NS is passed, should become NS[2] etc
input.id = field+"["+count+"]";
input.name = field+"["+count+"]";
input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
var td=document.createElement("td");
var newContent = document.createTextNode("NS");
td.appendChild(newContent);
tr.appendChild(td);
td=document.createElement("td");
td.appendChild(input);
tr.appendChild(td);
var btnDel=document.createElement("a");
btnDel.class="btn btn-primary";
btnDel.onclick = "addField(\'nameservers\',\'NS\',10);" ;
var btnText=document.createElement("span");
btnText.class="btn-label";
btnText.innerHTML="Add";
btnDel.appendChild(btnText);
td.appendChild(btnDel);
tr.appendChild(td);
field_area.appendChild(tr);
}
The produced code shows:
<a><span>Add</span>
</a>
</td>
instead of what I expect:
<a onclick="addField('nameservers','NS',10);" class="btn btn-primary">
<span class="btn-label">Add
</span>
</a>
What am I doing wrong? What's the proper way of passing all html attributes using the script?
For the on click
Instead of trying to output this into the HTML, why not do this in pure Javascript, using the addEventListener method?
element.addEventListener('click', function() {
addField('nameservers','NS',10);
}, false);
This approach is known as non-obtrusive Javascript, and it's actually quite a desirable attribute when developing a website.
For the class
As mentioned, use className and not class.
class usually precedes the declaration of as new class, and can't be used like an attribute, in the same way that you can't call a variable var.
Use className= instead of class=. So it will be like:
btnDel.className="btn btn-primary";
It is because the class word is reserved word in JavaScript.

javascript: Syntax to capture both string value of element name and element

I am getting hung up on how to go back and forth between the string value of the id of an element and element itself. I believe the problem involves syntax but cannot get it right. I would like to pass one parameter in javascript (in this case "title" and use it as a string and an element as follows to make a title disappear and an edit title box appear.
html
//note this html is actually written to page by another javascript function
<span id="title">Title</span><span id="titleedit"></span><img src="edit.gif" onclick="editTitle('title');">
If I leave out apostrophes around title I can get it to work as an element in following but then it does not work as a string.
javascript
function editTitle(field) {
//using field as string only works if parameter in above is in apostrophes
var fieldedit = field+"edit"
var editstring = '<input type="text" name="title" onclick="saveTitle();">save';
document.getElementById('fieldedit').innerHTML = "editstring";
//using as element only works if above has no apostrophes
field.style.display="none";
}
Thanks for suggesting how to accomplish both tasks...make title disappear and titleedit appear passing just word title. (The reason I want to pass title as parameter as there are a whole bunch of other fields to edit that I'd like to pass as one parameter each.)
When you say document.getElementById('fieldedit'), you're saying "the element with "fieldedit" as the id". What you want is "The element with the contents of the variable fieldedit as the id.
Give it a shot with document.getElementById(fieldedit).innerHTML = editstring;.
Update:
There is also a problem with this line:
var editstring = "<input type="text" name="title" onclick="saveTitle();">save";
Try escaping your quotes, or using a mixture of single and double quotes. For example:
var editstring = '<input type="text" name="title" onclick="saveTitle();">save';
Update 2:
To obtain a reference to the element with id="title":
var field = document.getElementById('title');
Now that field refers to that element, you can use:
field.style.display = 'none';
You can also do it all in one line:
document.getElementById('title').style.display = 'none';
document.getElementById('fieldedit').innerHTML = "editstring";
Shouldn't that be
document.getElementById(fieldedit).innerHTML = editstring; ?
You want to get the span with the id "titleedit" and insert the input element stored in editstring, if I understand your question.

Add a row to a table in Javascript that contains input classes

Im trying do this basically:
var tr = document.createElement("tr");
var td = document.createElement("td");
td.appendChild(document.createTextNode('<input class="param" type="text" name="dummy" value="fred"/>'));
tr.appendChild(td);
but it just displays the input... as normal text, how do I insert it so that it works as i require..?
im guessing its the createTextNode that needs to be changed?
Cheers
You could either
td.innerHTML = '<input class="param" type="text" name="dummy" value="fred"/>';
or
var ip = document.createElement( 'input' );
ip.className = 'param';
ip.type = 'text';
ip.name = 'dummy';
ip.value = 'fred';
td.appendChild( ip );
EDIT
ie won't allow the type of a form element to be changed dynamically. I'm pretty sure this only applies when the element already has a type and has already been inserted into the DOM. Best to check though. If it doesn't work use method 1
Try using innerHtml property of element.
That is try using td.innerHtml = "<input ...../>"
Meouw has the right idea. You're creating a text node in your example, and what needs to be done is create a dom element.
This is also another case where jQuery could simplify your code. What you were attempting to do by adding the element as an html string can be done with the jQuery html( val ) function:
http://docs.jquery.com/Attributes/html#val
Basically, to apply this technique with your given example, you would include the jQuery library on your page and write the following line:
$("#someTable").html('<tr><td><input class="param" type="text" name="dummy" value="fred"/></td></tr>');
You can also create any html element on the fly and string together attributes and event handlers in one line as in the following example:
http://www.peterbe.com/plog/creating-dom-element-with-jquery
var textbox = $("<input type='text'></input>").attr('name','dummy').addClass('param').val('fred');
$("#someTableCell").append(textbox);

Categories