Force change of placeholder in input

Question

Force change of placeholder in input

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have an HTML code which I try to access with javascript to the placeholder value to change its string, but when performing the following function it does not make the change.

<input 
   type="search" value="" name="s" id="yith-s" 
   class="yith-s" placeholder="Buscar productos" 
   data-append-to=".search-navigation" 
   data-loader-icon="http://www.urkam.cl/wp-content/plugins/yith-woocommerce-ajax-search-premium/assets/images/preloader.gif" 
   data-min-chars="3" style="padding: 8px;" autocomplete="off">

[
        function ModifyPlaceHolder () {
        let input = document.getElementById("yith-s");
        input.placeholder = "No need to fill this field";
  };

]

javascript

asked by Seba Lagos 24.05.2018 в 01:25

source

2 answers

How do I fill a multilist? Move from one window to another in react native and firebase

score 1 · Answer 1

I copied the code and added a addEventListener , since the function could not be started without it. Try as I say, it works for me.

Since I guess for what you have put that or you have forgotten the listener, or did not know what it does. If it is the latter, I add a small explanation

document is any element present in a document (as you see, the document itself in this case, can be replaced by variables or whatever you want), which we access by the means we choose, or by its id, by your label or the properties of another node.

DOMContentLoaded is the action or event by which the Listener executes the function. (In this case DOMContenLoaded, it is as soon as you load the web) List of events on the web

Up I add a list of events, in case the one I have added in the example does not work for you.

This is your edited code, as I explain above and it works.

function ModifyPlaceHolder () 
{
let input = document.getElementById("yith-s");
input.placeholder = "No need to fill this field";
};

document.addEventListener("DOMContentLoaded", ModifyPlaceHolder)

And the html I left it like the one you have.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>asda</title>
</head>
<body>
	<input type="search" value="" name="s" id="yith-s" class="yith-s" placeholder="Buscar productos" data-append-to=".search-navigation" data-loader-icon="http://www.urkam.cl/wp-content/plugins/yith-woocommerce-ajax-search-premium/assets/images/preloader.gif" data-min-chars="3" style="padding: 8px;" autocomplete="off">
	<script type="text/javascript" src="js/script.js"></script>

</body>
</html>

And what I said, your function is fine but what I see is missing a listener that starts the function, as I do not know what situation you want to change it, you will have to look in the page that I have attached.

I hope I have helped you.

score 0 · Answer 2

When the DOM elements are accessed through native javascript with the getElementById method, it returns an array NodeList with the element (s). To be able to change the placeholder with a function, it could be as follows:

function ModifyPlaceHolder (idElement) {
    let input = document.getElementById(idElement)[0];
    input.placeholder = "No need to fill this field";   
}

To call the function you could do two form, identify it with the id or with your class, to call it with the id you can do it in the following way:

ModifyPlaceHolder('input#id_del_input')

To call it taking the class as a redemption would be like this:

ModifyPlaceHolder('input.id_del_input')

When returning only one element the position of the element in the NodeList will be 0 , the function could be extended and validated if the input lenght is > 1 walk and change the placeholder to several inputs