实例：使用Hype制作输入姓名测幸运值的网页效果（二）

在上一小节中，小编主要讲解了如何创建一个用户手动输入框外加一个提交按钮的静态场景，在本节中，小编将主要使用Hype中的JavaScript函数，捕获用户在输入框中的输入值，进而利用此姓名输入值，生成幸运值并弹框显示的网页效果。

先行声明，小编使用的软件版本是Mac系统上的Hype 4版本，请确保软件版本一致以保证教程的准确性，下面开始教程步骤讲解。

第一步：点击HTML组件元素，然后在Hype的“身份检查器”中，设置唯一的元素ID为“content”，如下图1红框，为HTML组件加入身份ID标识，方便后面在JavaScript找到此HTML组件。

图1：设置唯一的元素ID

第二步：点击按钮元素，然后在Hype的“操作检查器”中，设置按钮“鼠标点按时”，执行操作为“运行JavaScript”，如下图2红框所示，然后函数选择“新函数”。

图2：设置鼠标点按时运行JavaScript

当大家选择“新函数”时，Hype会自动打开新函数的编辑页面，如下图3。

图3：新函数编辑页面

大家需要在函数的内部中写入如下图4红框所示代码，此代码的作用在于：捕获用户在输入框中输入的姓名，同时默认每个用户姓名的幸运值为100，最后弹出弹框，弹框内容为：“你好，xxx，你的名字幸运值为100”。

图4：函数代码展示

代码提供如下：

var name = hypeDocument.getElementById(‘content’);
var iframe = name.children[0];
var iframe_document = iframe.contentDocument;
var input = iframe_document.children[0].children[1].children[0].value;
var score = 100;
alert(‘你好，’+input+’, 你的名字幸运值为：’ +score);

其中第一行，使用上面第一步绑定的content ID，获取HTML组件元素；第二行是为了获取HTML组件元素的iframe内容，所谓iframe就是HTML中内嵌的HTML，Hype中的HTML组件元素的基本原理就是使用iframe内嵌到HTML网页中；第三行是为了获取iframe的document操作对象；第四行是为了获取用户在输入框中的输入值；第五行中设置姓名幸运值为100，这里大家可以随意更改，根据自身的需求设置score的值，或者设置根据不同的用户姓名，生成不同的幸运值；最后一行是弹框展示。

这样子就完成了网页效果的制作，点击预览按钮即可对网页效果进行预览。本教程主要实现了用户输入以及捕获用户输入内容的功能，接下来还会有更多有用教程发布在城东书院网站上，请大家继续关注哦。