Change values of variables in a function through another function?

Question

Change values of variables in a function through another function?

Navigation

#1 by (4 votes)
#2 by (2 votes)

3

How to pass parameters from one function to another?

Follow 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 when firing the event change the value of limit is changed to behave more characters and later when the select loses the focus back to the initial value that is 3 (but let's break it down).

javascript

asked by anonymous 03.01.2017 / 22:21

2 answers

2

One more resolution 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>

04.01.2017 / 17:04

How to convert a string with minutes / month / year in TimeStamp? Problem with bindParam - PHP

score 4 · Accepted Answer

Here's 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.