Javascript Stopwatch Insert into HTML - javascript

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.

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

Jquery this.find() not picking anything up?

I hope you can help. I am trying to set part of a column to a text area.
$('#myListview .list-item').click(function() {
getId('textarea-Status').value(this.innerHTML);
}
I printed out 'this' which shows all of my HTML however I only want to show a specific part:-
Within the HTML that I have printed out to a text area I want to be able to print the row ID called 'data-roid'.
<div class = "ui-btn-text listview-row" **data-rowid="123456789"**>
So basically my new text are value wuld = '123456789'
getId('textarea-sysID').value($(this).find('data-rowid').text()));
sysID = $(this.data-rowid);
alert(sysID.innerHTML);
getId('textarea-sysID').value(sysID);
getId('textarea-sysID').value = JSON.stringify(sysID);
Would really appreciate any help.
Thanks
Get element by has attribute selector and attribute value by using data() method.
$(this).find('[data-rowid]').data('rowid')

How to add user input to a JavaScript array

I am in the process of learning JavaScript and jQuery, so apologies if any of this sounds naive or obvious. I started what I thought was a fairly simple project to practice and hopefully learn something in the process.
What I want to do is this: the user inputs a sentence and hits a submit button. The sentence gets added to a list of other sentences submitted by people (preferably on a separate file, preferably encrypted, but not necessary). Then, the website grabs a random sentence from the list and displays it.
I am not asking on how to build all of this. I have already put most of it together, but I am including it here for reference.
I have a separate javascript file with the array of quotes.
var quotes=new Array();
quotes[0]="<p>Quote 1</p>";
quotes[1]="<p>Quote 2</p>";
quotes[2]="<p>Quote 3</p>";
quotes[3]="<p>Quote 4</p>";
quotes[4]="<p>Quote 5</p>";
quotes[5]="<p>Quote 6</p>";
quotes[6]="<p>Quote 7</p>";
Then I randomly display one using this:
function getQuote(){
var thisquote=Math.floor(Math.random()*(quotes.length));
document.write(quotes[thisquote]);
}
And adding <script> getQuote(); </script> to the html.
This all works fine.
The part I cannot seem to figure out is taking user input and adding it to the jQuery array. I am using a contenteditable div instead of an <input> because I want it to have multiple lines of text and have a character limit, which as far as I know can only be done with a contenteditable div (according to the research I did at the time, I may be wrong).
I have looked around and tried many if not all the examples I found of how to do this, and none of them worked. This is the last method I tried, if it helps:
$(".submit").click(function() {
quotes[quotes.length] = document.getElementsByClassName("input").value;
});
So, to reiterate, I want to take user input and add it to a JavaScript array. I have scoured stackoverflow and the interet but nothing has worked. Please help!
UPDATE: Arvind got it right. I still have a lot to learn, and it seems I need to read up on localstorage and cookies. I will also need to use PHP to save the sentences on the server. Thank you to all who answered!
Problem is document.getElementsByClassName("input") gives you a NodeList and not just a single html element. So if you do this document.getElementsByClassName("input").value, you will end up quotes as [undefined, undefined ... undefined]. Assuming you have single element with the class name input, go with index 0. Also as you stated that you are using div with attribute contenteditable, you may try this instead. document.getElementsByClassName("input")[0].innerHTML
Try this example.
var quotes = localStorage.getItem('quotes'); //get old, if any, gives you string
quotes = quotes ? [quotes] : []; // if got quotes then make it as array else make new array
$(function() {
var quote = $('#quote'); //get the quote div
quote.html(quotes.join('') || quote.html()); //set the default text
$('#btn').on('click', function(e) {
quotes.push(quote.html());
localStorage.setItem('quotes', quotes.join('')); //save the quotes
alert(quotes.join(''));
});
});
#quote {
border: 1px solid grey;
height: 100px;
overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div contenteditable='' id='quote'>
<ol>
<li>Quote 1</li>
<li>Quote 2</li>
</ol>
</div>
<input type='button' id='btn' value='Submit' />
P.S.
In order to preserve the old quotes you may possibly use cookie, localStorage, etc.
Are these "quotes" being saved locally?
Yes, to share it among several users visiting by different browsers, you have to save it with the server script like PHP, Java, ASP, etc. Here you can either use ajax, if you wana avoid page reload on submit, else you can go for form submit.
$(".submit").click(function() {
quotes[quotes.length] = document.getElementsByClassName("input").value;
});
should be
$(".submit").click(function() {
quotes.push(document.getElementsByClassName("input").text());
});
EDIT: With a content editable div you need to use text() instead. Here is an example fiddle. https://jsfiddle.net/
var quotes=[];// better
// function to add to array
function addQuote(myquote){
quotes.push('<p>'+myquote+'</p>');
}
addQuote("Quote 1");
addQuote("Quote 2");
addQuote("Quote 3");
addQuote("Quote 4");
addQuote("Quote 5");
addQuote("Quote 6");
addQuote("Quote 7");
addQuote("Quote 8");
$(".submit").on('click',function() {
addQuote(document.getElementsByClassName("input")[0].value);
});
NOTE: suggest NOT using the "input" class name and use some other one as that might be confusing to others at some point later (confused by element named input)
I also added the paragraph tags as that would provide a consistent pattern for your input text. Assumption on my part however.
NOTE I also assume that the element IS an input type with the .value since that is NOT provided (the markup)

Formatting HTML with jQuery inside a javascript function

I'm trying to update numbers on a page based on button pushing by a user. I have it working, but when the number updates, the text is no longer formatted like it came in a <code></code> block. Here's the code I'm using minus any effort to control the format:
<script>
var countUp = function() {
$("#num").html(parseInt($("#num").html()) + 1);
$("#textWithNumInIt").html("The number is now"+$("#num").html() );
}
</script>
<p id="textWithNumInIt"><code>The number is 0</code></p>
I've tried putting <code></code> tags inside the jQuery, with and without escape characters. I've tried using .val() and .text() to set the text in an effort to leave the formatting alone. I've tried using a span around the number itself, but then the value doesn't even update.
This is the first time I have changed HTML using jQuery inside a javascript function, so the trouble might have something to do with that. Any help would be awesome, and if you have advice on a totally different way to do this, please share.
When you edit the contents of the textWithNumInIt paragraph, the <code> tags inside that paragraph are naturally replaced as well. This should work:
$("#textWithNumInIt").html("<code>The number is now "+$("#num").text()+"</code>" );
Maybe try this -
$('#textWithNumInIt code').html("The number is now "+$("#num").text() )
When you parseInt it, it gets converted into plain text and the <code> wrapper is gone. Use this and you will be on your path.
var countUp = function() {
var t = parseInt($("#num").text()) + 1);//using text() to avoid any unintentional html tag issues
$("#num").html(t);
$("#textWithNumInIt").html("<code>The number is now "+t+"</code>" );
}
or otherwise you can continue with your code by making a simple edit.
var countUp = function() {
$("#num").html(parseInt($("#num").html()) + 1);
$("#textWithNumInIt code").html("The number is now"+$("#num").html() );
}

Change value of textarea when hovering link

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/

Categories