通过单击按钮，在字段有效时显示容器

是一种常见的前端交互效果。当用户在输入框或表单中输入有效内容后，点击按钮，可以通过JavaScript代码来控制显示一个容器，例如一个弹出框、提示框或者其他自定义的UI元素。

这种交互效果可以提升用户体验，让用户在输入有效内容后立即得到反馈或者展示相关信息。以下是一个实现该效果的示例代码：

HTML部分：

<input type="text" id="inputField">
<button id="submitButton">提交</button>
<div id="container" style="display: none;">
  <!-- 容器内容 -->
</div>

JavaScript部分：

const inputField = document.getElementById('inputField');
const submitButton = document.getElementById('submitButton');
const container = document.getElementById('container');

submitButton.addEventListener('click', function() {
  if (inputField.value !== '') {
    container.style.display = 'block';
  }
});

在上述代码中，我们首先通过getElementById方法获取到输入框、按钮和容器的DOM元素。然后，我们给按钮添加了一个点击事件监听器，当按钮被点击时，会执行回调函数。在回调函数中，我们通过判断输入框的值是否为空来决定是否显示容器。如果输入框的值不为空，则将容器的display属性设置为block，从而显示容器。

这种交互效果可以应用于各种场景，例如表单验证、搜索功能、用户登录等。在腾讯云的产品中，可以使用腾讯云的云函数（SCF）来实现该效果。云函数是一种无服务器计算服务，可以通过编写函数代码来响应特定的事件，例如按钮点击事件。您可以使用云函数来处理前端交互逻辑，并在满足条件时显示容器。具体的腾讯云云函数产品介绍和文档可以参考腾讯云云函数。