Question

我的HTML＆amp; CSS代码

<div id="wrapper">
 <label for="bodyInput">Body Text: </label><input id="bodyInput" type="text"><br>
    <label for="qtyInput">Quantity: </label><input id="qtyInput" type="text"><br>
    <label for="colorInput">Color: </label>
    <select id="colorInput">
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
    </select><br>

    <button id="runBtn">Display Content</button>
    <button id="resetBtn">Clear Content</button>

    <h2>Results</h2>
    <div id="resultsWrapper"></div>
</div>
<style>
#wrapper {
        background-color: #fff;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px 40px;
    }
    #resultsWrapper .result {
        border: 4px solid red;
        padding: 10px;
        margin: 10px 0;
    }
    #resultsWrapper .red {
        border-color: red;
    }
    #resultsWrapper .red h2 {
        color: red;
    }
    #resultsWrapper .green {
        border-color: green;
    }
    #resultsWrapper .green h2 {
        color: green;
    }
    #resultsWrapper .blue {
        border-color: blue;
    }
    #resultsWrapper .blue h2 {
        color: blue;
    }
 </style>

在bodyInput中，我打算显示来自用户的一盒内容，而在qtyInput中，我正在显示所述内容框X次。下面的图像应该是javascript功能的结果。

Mock up results

这是我到目前为止所做的，但我的目标是纯粹自己做这个，没有外部的JavaScript库。

(function(){
        var bodInp = document.getElementById('bodyInput').value;
        var qtyInp = document.getElementById('qtyInput').value;
        var colorInp = document.getElementById('colorInput');
        var colSelect = colorInp.options[colorInp.selectedIndex].changeColor;


        qtyInp = Number(qtyInp.value);
        document.getElementById('resetBtn').addEventListener('click', reset, false);
        document.getElementById('runBtn').addEventListener('click',runLab, false);
        document.getElementById('test').addEventListener('click',test,false);


        function test(){ // Couldn't find the values when I launched it.. they were undefined despite putting in some text & numbers.
            console.log('bodInp');
            console.log('qtyInp');
            console.log(colorInp.value);
        }

        function reset(){

            document.getElementById('bodInput').value="";
            document.getElementById('qtyInput').value="";
            colorInp.value = colorInp.options[colSelect].text;
        }

        function runLab(){
            colorInp.changeColor=colSelect;
        }




    })();

编辑 - 答案尚未完全解决，但走上了正确的道路。谢谢你的帮助！

Answer 1

您可以将按钮上的onclick事件直接附加到按钮的HTML

<button id="runBtn" onclick="test()">Display Content</button>

然后，您需要在单击按钮时获取输入的值。你编写它的方式是在页面加载时拾取它们（此时输入框仍为空）。

function test() {

  // get the current value of bodyInput at the time the button is clicked
  var bodInp = document.getElementById('bodyInput').value;

  // the value of a text box is a string which has a conversion function
  var qtyInp = document.getElementById('qtyInput').value.parseInt();

  // hold the target content in an array
  var content = [];

  // add the content in a for loop
  for (var i=0; i<qtyInp; i++) {
    content.push("<div>"+bodInp+"</div>");
  }

  // join the result and put it into the target div
  document.getElementById("resultsWrapper").innerHTML = content.join("");
}

检索用户输入以显示按钮中的内容？

1 个答案: