Pass value I click into popup div

Asked

Viewed 313 times

2

I want to get the value of the day I have on a chart. This is a hyperlink, and when I click, go to the div popuup, which will open with the printed day (aff_j variable).

disp("<TD class=j bgcolor='"+colFerie+"' align='center'><a onclick='open_popup()' href='#'><FONT face='Arial' size='-1' color='"+colTexte+"'>"+aff_j+"</FONT></a></TD>");
function open_popup(){
    document.getElementById('popup').style.display = 'block';
    document.getElementById('abc').style.display = 'block'; 
}

Div popup

<div id="popup" style="display:none" align="center" >
        <a onclick="close_popup()" href="#" style="float: right;">X</a>
        <br>            
        <label>POPUP</label>


    </div>

1 answer

1

From what I understand, you intend to pass the value of the variable aff_j into your popup which is initialized by the function open_popup() which in turn is called at the event click tag <a/> present in a table.

If you add the value as parameter:

/*...*/ "onclick='open_popup(\""+aff_j+"\")'" /*...*/

You can then receive the same in your job open_popup():

function open_popup(aff_j) { /*...*/ }

Thus giving possibility to do something with this value when the popup opens.

Your code is changed:

disp("<TD class=j bgcolor='"+colFerie+"' align='center'><a onclick='open_popup(\""+aff_j+"\")' href='#'><FONT face='Arial' size='-1' color='"+colTexte+"'>"+aff_j+"</FONT></a></TD>");

function open_popup(aff_j) {

    // fazer algo com o valor de "aff_j"
    alert(aff_j);

    // ...
}

Example

below example operating through the structure presented in your question:

function close_popup() {
    document.getElementById('popup').style.display = 'none';
}

function open_popup(aff_j) {

    // fazer algo com o valor de "aff_j"
    alert("Clicou no dia: " + aff_j);
    var myPopup  = document.getElementById('popup');
    
    myPopup.insertAdjacentHTML('beforeend', '<div>'+aff_j+'</div>');

    document.getElementById('popup').style.display = 'block';
    document.getElementById('abc').style.display = 'block'; 
}

function disp (meuHtml) {
    document.getElementById("minhaTr").innerHTML = meuHtml;
}

// As variáveis que estás a utilizar
var colFerie = "black",
    colTexte = "white",
    aff_j    = 1;

// A chamada da tua função como tens na pergunta mas com adição do sugerido na minha resposta
disp("<TD class=j bgcolor='"+colFerie+"' align='center'><a onclick='javascript:open_popup(\""+aff_j+"\")' href='#'><FONT face='Arial' size='-1' color='"+colTexte+"'>"+aff_j+"</FONT></a></TD>");
#abc{
    display:none;
}
<table>
    <thead>
        <tr>
            <th>Dia</th>
        </tr>
    </thead>
    <tbody>
        <tr id="minhaTr"></tr>
    </tbody>
</table>
<div id="popup" style="display:none" align="center" >
    <a onclick="close_popup()" href="#" style="float: right;">X</a>
    <br/>
    <label>POPUP</label>
    <p></p>
</div>
<div id="abc">Eu também estava escondida!</div>

Also in the Jsfiddle.

  • The value of Undefined me.

  • @akm Sorry, I lacked the escape of value: "onclick='open_popup(\""+aff_j+"\")'". I edited to rectify the answer.

  • I still have the same problem.

  • @akm The origin of your current problem must be elsewhere because the code as I suggest in the answer works well. You can see this Jsfiddle where I simulate your environment.

Browser other questions tagged

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