Pass value that I click into div popup

2

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

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>
    
asked by anonymous 21.10.2014 / 16:02

1 answer

1

So you understand, you want to pass the value of aff_j to your popup which is initialized by the open_popup() function which in turn is called in the click event of the tag <a/> present in a table.

If you add the value as a parameter:

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

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

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

This gives you the ability to do something with this value when popup opens.

Your code 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 is an example of how to work using the structure shown 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>

Example also in JSFiddle .

    
21.10.2014 / 21:19