Question

我正在使用ImpactJS引擎开发游戏，我为游戏创建了一个基本表单，其中包含输入框和提交按钮。我能够从输入框中检索值，但我想要的是，当玩家点击提交时，输入框中的任何值都会被提取，我应该能够在提交点击时获得该值。如果值为null，我应该收到一条警告，说“没有价值或其他什么”。我想使用这个最终值并将其分配给我可以在Impact引擎内的JavaScript文件中使用的变量，以跟踪游戏中的输入。我是HTML，CSS的新手，所以我不知道如何实现这一目标。

下面是我的HTML / CSS代码，它有一个输入框和一个提交按钮。

<!DOCTYPE html>
<html>
<head>
    <title>Impact Game</title>
    <style type="text/css">
        html,body {
            background-color: #333;
            color: #fff;
            font-family: helvetica, arial, sans-serif;
            margin: 0;
            padding: 0;
            font-size: 12pt;
        }
        #problemform {
            display: none;
            width: 300px;
            height: 100px;
        }
        #probleminput {
            position: absolute;
            display: none;
            top: 450px;
            left: 240px;
            height: 50px;
            width: 350px;
        }
        #problemsubmit {
            position: absolute;
            display: none;
            top: 530px;
            left: 623px;
            height: 40px;
            width: 100px;
            padding: 5px 10px 8px 2px;
        }
        #prob_submit_msg {
            width: 30%;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }
        #canvaswrapper {
            position: relative;
            height: 768px;
            width: 1024px;
            display: block;
            margin: auto;
            margin-top: 80px;
            vertical-align: middle;

        }
        #canvas {

            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

    </style>
    <script type="text/javascript" src="lib/jquery.min.js"></script>
    <script type="text/javascript" src="lib/impact/impact.js"></script>
    <script type="text/javascript" src="lib/game/main.js"></script>
</head>
<body>
<div id="canvaswrapper">
        <canvas id="canvas" width="1024" height="768"></canvas>
    <div id="problemform" class="form-inline">
        <input id="probleminput" class="form-inline" type="text" style="display: inline;"></input>
        <button id="problemsubmit" class="btn" style="display: inline-block;">Submit</button>
    </div>
        <div id ="prob_submit_mssg" style="display: block;"></div>
</div>
</body>
</html>

下面是ImpactJS中我在不同JS文件中的代码块，用于显示输入框和使用Jquery提交按钮

ProblemDisplay:function() {
            this.setQuestion('This is a title','this is where the body will go and it will be super long and impossible to read or understand.', 'This is a hint');
            this.isActive = true;
            var form = $("#problemform");
            var inputBox = $("#probleminput");
            var submitButton = $("#problemsubmit");
            form.show();
            inputBox.show();
            submitButton.show();
        },

这就是我现在所做的工作。但是现在我希望在单击提交按钮时将输入框中传递的字符串存储在不同的变量中。怎么做到这一点？

谢谢！

Answer 1

为点击提交按钮创建一个事件监听器。

在jQuery中：

$('#submit-button').on('click', function() {

});

in vanilla js

document.getElementById('submit-button').addEventListener('click', function() {

});

然后从输入框中获取值：

在jQuery中：

$('#submit-button').on('click', function() {
    var value = $('input').val(); 
    // Do what you want with the value
});

in vanilla js

document.getElementById('submit-button').addEventListener('click', function() {
    var value = document.getElementById('input').value;
    // Do what you want with the value
});

Answer 2

如果有人点击按钮，您只需要输入字段的值，那么此解决方案可能适合您：

<强> Fiddle Demo

JS：

$('#problemsubmit').on('click', function (event) {
    event.preventDefault();
    var formInput = $('#probleminput').val();
});

Answer 3

试试这个......：

HTML：

<input id="probleminput" class="form-inline" type="text" style="display: inline;">   </input>
<button id="problemsubmit" class="btn" style="display: inline-block;">Submit</button>

<a id='testop' ></a>

JS：

var form = $("#problemform");
var inputBox = $("#probleminput");
var submitButton = $("#problemsubmit");
submitButton.click(function(){
var getval = ($("#probleminput").val()?$("#probleminput").val():alert('please fill the   text field'))
$('#testop').text(getval);  
});

Complete DEMO

在提交按钮上单击获取输入框值

3 个答案: