Set value after clicking in field

Joined
Dec 31, 2022
Messages
12
Reaction score
1
Hi, with the below userscript on a (protected) webpage I'm trying to set a text in a field when it is clicked:

JavaScript:
document.getElementById("titoDs").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("titoDs").value = "my text";
}

but the script works in part: the text is correctly set but when I re-click in the field the value is cleared, though I wish the text was not deleted. This is the original code of the field in the webpage:

JavaScript:
<div class="grid-row">
          <!-- Ricerca per titolo e clet -->
          <label id="lbl_d_datiric_titolo">
            Titolo
            <input type="text" name="ds" id="titoDs" class="grid-15" value="" maxlength="50">
            <select name="dsCombo" id="iddsCombo" style="min-width: 0px; display: none;">
<option value="1" selected="">Parte iniziale</option><option value="2">Titolo esatto</option><option value="3">Parole (solo per ricerca in polo)</option></select><div class="chosen-container chosen-container-single chosen-container-single-nosearch" style="width: 254px;" title="" id="iddsCombo_chosen"><a class="chosen-single" tabindex="-1"><span>Parte iniziale</span><div></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off" readonly=""></div><ul class="chosen-results"></ul></div></div>
</label>
        </div>

Thanks!
 
Joined
Jul 3, 2022
Messages
93
Reaction score
23
HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
    
    </style>
  
  </head>
  <body>   
      <div class="grid-row">
          <!-- Ricerca per titolo e clet -->
          <label id="lbl_d_datiric_titolo">
            Titolo
            <input type="text" name="ds" id="titoDs" class="grid-15" value="" maxlength="50">
            </label>
            <select name="dsCombo" id="iddsCombo" style="min-width: 0px; display: none;">
               <option value="1" selected="">Parte iniziale</option>
               <option value="2">Titolo esatto</option>
               <option value="3">Parole (solo per ricerca in polo)</option>
               </select>
               <div class="chosen-container chosen-container-single chosen-container-single-nosearch" style="width: 254px;" title="" id="iddsCombo_chosen">
               <a class="chosen-single" tabindex="-1">
               <span>Parte iniziale</span>
               <div></div></a>
               <div class="chosen-drop">
               <div class="chosen-search">
               <input type="text" autocomplete="off" readonly="">
               </div>
               <ul class="chosen-results"></ul>
               </div>
               </div>
        </div>
        <script>
        document.querySelector('#titoDs').addEventListener('click', function(){
           this.value = 'some text';
        });
        </script>
  </body>
</html>

The original markup you provided has wrong using of the label element:
  • The label element may contain at most one button, input, meter, output, progress, select, or textarea descendant
  • Element div not allowed as child of element label in this context.
 
Joined
Dec 31, 2022
Messages
12
Reaction score
1
Thanks for the answer, maybe I should upload the entire page, this would be the saved copy of the original page: link here, and this is a video of the behaviour applying my script on field Titolo. Could I modify the userscript? Thanks
 
Last edited:
Joined
Jul 3, 2022
Messages
93
Reaction score
23
For some reason no video was loaded - only endless "loading" image. Talking about userscript - are you creating an extension for Chrome or another browser? Did my code work for you or what? By the way, I tested the code on Chrome, FF and Edge before posting it here and it worked ok. As for wrong mark up, you can inspect your page validation result here by yourself and see all the errors and warnings which are of great number.
 
Joined
Dec 31, 2022
Messages
12
Reaction score
1
No, I'm simply using this Chrome extension, see here for the video, hope it's clearer. I tested your below script but has the same behaviour of mine, so the click event should only run once.
 
Last edited:
Joined
Jul 3, 2022
Messages
93
Reaction score
23
You should have informed your possible helpers about it in the very beginning. I'm not going to investigate how that extension works. May be you ask the extension developer how to use it to fit your needs. The code I provided above works good on at least 3 browsers, and that was the direct answer to the question you asked.
 
Joined
Dec 31, 2022
Messages
12
Reaction score
1
I'm sure it's not an extension problem, but a script problem. Yes, your script works like mine except for the final step, because the click event should only run once. Should I add {once:true} somewhere? Should I add somewhere a document.removeEventListener('click', function); ? I can't apply these suggestions.
 
Last edited:
Joined
Dec 31, 2022
Messages
12
Reaction score
1
Thanks, I tried this but it isn't working:

JavaScript:
document.querySelector('#titoDs').addEventListener('click', function() {
           this.value = 'some text';
            document.removeEventListener('click', function());
});
 
Joined
Jul 3, 2022
Messages
93
Reaction score
23
Try this:

JavaScript:
document.querySelector('#titoDs').addEventListener('click', function(){
           this.value = 'some text';
        }, {once: true});
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,790
Messages
2,569,637
Members
45,347
Latest member
LeilaGow3

Latest Threads

Top