javascript - Javascript toggle visibility showing text underneath

Question

When i click the ***** it shows the api key underneath on a new line. What I'm trying to do is when i click the stars it will hide the stars and show apikey then can someone point me where i went wrong.

My Image:

My Code:

<li class="list-group-item">
    <i class="fa fa-tasks"></i> API Access:<span class="badge badge-danger pull-right"><span onclick="toggle_visibility('foo');">********</span>
    <div id="foo" style="display:none;"><span class="label label-info"><?php echo ( isset($userInfo['apikey']) && !empty($userInfo['apikey']) ? $userInfo['apikey'] : "No" ); ?></span></div>
    </span>
    </a>
</li>
<script type="text/javascript">
    <!--
    function toggle_visibility(id) {
        var e = document.getElementById(id);
        if (e.style.display == 'block')
            e.style.display = 'none';
        else
            e.style.display = 'block';
    }
    //-->
</script>`

标签： javascriptphphtml

Answer 1

您可以通过多种方式改进您的代码，并使其按您的意愿工作。考虑到从 html 节点调用时的函数行为，我简化了 HTML 结构和 js。

<li class="list-group-item">
  <i class="fa fa-tasks"></i>
  API Access:
  <span class="badge badge-danger pull-right">
    <span onclick="show_apikey(<?php echo ( isset($userInfo['apikey']) && !empty($userInfo['apikey']) ? $userInfo['apikey'] : "No" ); ?>);">********</span>
  </span>
</li>
<script type="text/javascript">
<!--
function show_apikey(apikey) {
  this.innerText = apikey;
}
//-->
</script>