Change variable values in a function through another function?

Asked

Viewed 283 times

3

How to pass parameters from one function to another ?

Follows the code:

<body onload="getfoucs()">
<select id="select_compra" data-limit="3">
	<option disabled selected style="display: none">Aaaaaaaaaaaaa</option>
	<option>Bbbbbbbbb</option>
	<option>Ccccccc</option>
	<option>Ddddddddddd</option>
</select>
 <script>
function datalimit(limit)
{
var selects = document.querySelectorAll('[data-limit]');
    [].forEach.call
    (
    	selects, function(select)
    	{
  	   		var limit = select.getAttribute('data-limit');
       		[].forEach.call
       		(
	       		select.options, function(option)
        		{
    				var text = option.innerHTML.substring(0, limit);
    				option.innerHTML = text;
    			}
    		);
  		}
  	);
}
function getfoucs()
{
	datalimit();
	select_compra.addEventListener
	(
		'change', function()
		{
			datalimit(50);
			/*
			Como eu altero o valor de "limit" e
			Chamo novamente a função datalimit()
			*/
		}
	);
}
</script>
</body>

My intention is that by firing the event change the value of limit is changed to hold more characters and later when the select lose the focus back to the initial value that is 3(but let’s go in pieces).

javascript

  • You want to show more characters when I’m focused and less when I’m not focused, that’s it?

  • That’s what this is, izzas...

2 answers

4


Here is a suggestion:

(function(selects) {
    var limite = 3;

    function verificarLimite(opts) {
        var originais = opts.map(function(option) {
            return option.innerHTML;
        });
        return function(e) {
            opts.forEach(function(option, i) {
                option.innerHTML = e.type == 'blur' ? originais[i].slice(0, limite) : originais[i];
            });
        }
    }
    selects.forEach(function(select) {
		var verificador = verificarLimite(Array.from(select.children));
        select.addEventListener('focus', verificador);
        select.addEventListener('blur', verificador);
        verificador({type:'blur'});
    });
})(Array.from(document.querySelectorAll('[data-limit]')));
<select id="select_compra" data-limit="3">
    <option disabled selected style="display: none">Aaaaaaaaaaaaa</option>
    <option>Bbbbbbbbb</option>
    <option>Ccccccc</option>
    <option>Ddddddddddd</option>
</select>

The code is well contained and does what you want.

2

One more solution to the problem

<body onload="getfoucs()">
<select id="select_compra" data-limit="3">
	<option disabled selected style="display: none" data-texto="Aaaaaaaaaaaaa">Aaaaaaaaaaaaa</option>
	<option data-texto="Bbbbbbbbb">Bbbbbbbbb</option>
	<option data-texto="Ccccccc">Ccccccc</option>
	<option data-texto="Ddddddddddd">Ddddddddddd</option>
</select>
</body>
<script>
function LimitInput()
	{
		select = document.querySelector('[data-limit]');
	    limit = select.getAttribute('data-limit');
	    [].forEach.call
	    (
	    	select.options,	
	    	function(option)
	    	{
	    		text = option.innerHTML.substring(0, limit);
	    		option.innerHTML = text;
	    	}
	    );
	}
function getfoucs()
{
	LimitInput();
	select_compra.addEventListener
	(
		'focus', function()
		{				
		  var elmnt = document.getElementById('select_compra');
		  for(var i=0; i < elmnt.options.length; i++)
          {
            var texto = elmnt.options[i].getAttribute('data-texto');
            elmnt.options[i].innerHTML  = texto;
          }			
		}
	);
    select_compra.addEventListener
	(
		'blur', function()
		{				
			LimitInput();		
		}
	);
	
}
</script>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.