Use variable more times, click Event

Asked

Viewed 441 times

2

I have a select HTML and change the value of a variable after passing the onchange() function. The problem is I have another condition and I can’t validate.

JS:

//function mode select
var option = 0
function getData(val) {
if (val.value === "option1"){
    option = 1
    alert("option deplacement!");
}else{  
    option = 2
    alert("option ligne!");

} 
 show();
}

function show() {
   console.log(this.option);
    val = this.option
    if (val == 2){
        var el = document.getElementById('id_click');
        el.onclick = function (e) {
            alert("click2")
            var ev = e || window.event;
            var x2 = el.getAttributeNS(null, "x"); 
            var y2 = el.getAttributeNS(null, "y"); 
            //console.log(x2+" "+y2)
        }
    }
 }

HTML:

<select id="selectid" onChange="getData(this);" >
   <option value="option1">Deplacement</option>
   <option value="option2">lignes</option>
</select>
<div id="id_div">dfsd</div>

Example in Jsfiddle

javascript html

3 answers

1

you can use the switch to make this operation and make it more legible, try this way.

function getData(val)
{
var option = 0
switch(val.value) {
    case "option1":
        option = 1
        alert("option deplacement!");
        break;
    case "option2":
        option = 2
        alert("option ligne!");
        break;
    default:
        option = 0;
  }
if (option == 2) {
    alert("Option2");
  }

}

1


Because of the variable option be defined in the overall scope and a declarative function, such as yours, receive the this directly from the global scope it is possible to use the this. In this case you can simply add the this in the option variable within the function, example: this.option = 1;.

See the example below.

jsFiddle

// Variavel definina em escopo global.
var option = 0;

function getData(elemento) {
  
  // atribui valor a variavel option usando o operador ternário.
  this.option = elemento.value === 'option1' ? 1 : 2;
}

function clicked(elemento) {
	if(this.option === 2) {
    	elemento.innerHTML = "você clicou e a cor mudou.";
        elemento.style.background = 'tomato';
    } else {
        elemento.innerHTML = "você pode até clicar mas nada acontecerá.";
    }
}
div {
    background: lightgray;
    height: 100px;
    margin: 10px;
    width: 200px;
}
<select id="selectid" onChange="getData(this);" >
	<option value="option1">Deplacement</option>
	<option value="option2">lignes</option>
</select>

<div onclick="clicked(this);"></div>

  • I edited using this code, I want an onclick Event in show function.

  • @akm The show function was created only to show that the option has been changed and is visible anywhere in the scope. Create an event onclick assigning to the element you want and use the this.option to validate the value in the function.

  • I have a div, and when I click on it the onclick event appears. Inside the function I cannot identify the element. I just want to click when the select is 2.

  • @akm prevent clicking on an element is not possible, unless you disconnect the user’s mouse, joke. So... if your intention is to perform an action by clicking on div only when option for 2 just make one if to validate. I changed the code, take a look at jsFiddle if you prefer.

0

Puts the IF within the function also

var option = 0
function getData(val) {
    if (val.value === "option1"){
        option = 1
        alert("option deplacement!");
    }else{  
        option = 2
        alert("option ligne!");
    }

    if(option==2){
        alert("option2");
    }
}

  • Thanks for the reply, but I have another function after that function, the onclick event.

  • var el = Document.getElementById('Co1'); el.onclick = Function (and) { }

  • Put it all in your question.

  • edited jsfiddle, I want a click when I’m in the second select option

Browser other questions tagged javascript html

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