当我点击按钮更改输入值时如何再次调用函数？

问题描述 投票：0回答：1

我想使用 DOM 构建斐波那契数列。我使用了一个输入，您可以在其中键入一个数字，然后得出序列的最后一个数字，然后显示所有序列。问题是，当我想更改输入中的数字时，它会继续显示下一个序列，而不是更改前一个序列，并且还会继续“输入正数”。如果我输入负数，则保留之前的序列。当我更改输入中的数字并单击按钮时，我想取消以前的结果并再次运行该函数，但我不明白该怎么做。

var btn1 = document.querySelector('#btn1');                
var input = document.querySelector('#input');            
var span1 = document.querySelector('#span1');           
var span2 = document.querySelector("#span2");           
var para1 = document.querySelector('#para1');          
var para2 = document.querySelector('#para2');        
var list = document.querySelector('#list');           
btn1.addEventListener('click', fibonacci);

function fibonacci() {

if(input.value <= 0) {
para1.textContent = 'Type a positive number.';
para2.remove();
}

if (input.value == 1) {
span1.textContent = 1;
span2.textContent = 1;
list.textContent = '1';
}

if (input.value == 2) {
span1.textContent = 2;
span2.textContent = 1;
list.textContent = '1, 1'
}

if (input.value >= 3) {
let array = [1, 1];
span1.textContent = input.value;

for (let i = 2; i < input.value; i++) {
var item = array[i-2] + array[i-1];
array.push(item);
};

span2.textContent = array[input.value-1]

for (let j = 0; j < array.length; j++) {
var li = document.createElement('li');
li.textContent = array[j];
list.appendChild(li);


input.focus();
}
<label for = 'number'>Type a number: </label>
<input type = 'number' id = 'input'>
<button id = 'btn1'>Click me</button>
<p id = 'para1'>The <span id = 'span1'>_</span> number from the sequence is: 
<span id = span2></span></p>
<p id = 'para2'>Your fibonacci sequence is: 
<ul id = 'list'></ul> </p>
</div>

javascript arrays for-loop dom fibonacci
1个回答
0
投票

您的代码有一些错误。我已经为你改正了。参考以下代码：

var btn1 = document.querySelector('#btn1');
        var input = document.querySelector('#input');
        var span1 = document.querySelector('#span1');
        var span2 = document.querySelector('#span2');
        var para1 = document.querySelector('#para1');
        var para2 = document.querySelector('#para2');
        var list = document.querySelector('#list');
        
        btn1.addEventListener('click', fibonacci);

        

function fibonacci() {
            para1.textContent = 'The _ number from the sequence is:';
            span1.textContent = '_';
            span2.textContent = '';
            list.innerHTML = '';

            var value = parseInt(input.value);

            if (value <= 0) {
                para1.textContent = 'Type a positive number.';
                return;
            }

            if (value === 1) {
                span1.textContent = 1;
                span2.textContent = 1;
                list.textContent = '1';
                return;
            }

            if (value === 2) {
                span1.textContent = 2;
                span2.textContent = 1;
                list.textContent = '1, 1';
                return;
            }

            let array = [1, 1];
            span1.textContent = value;

            for (let i = 2; i < value; i++) {
                var item = array[i - 2] + array[i - 1];
                array.push(item);
            }

            span2.textContent = array[value - 1];

            array.forEach(num => {
                var li = document.createElement('li');
                li.textContent = num;
                list.appendChild(li);
            });

            input.focus();
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fibonacci Sequence</title>
</head>
<body>
    <label for='number'>Type a number: </label>
    <input type='number' id='input'>
    <button id='btn1'>Click me</button>
    <p id='para1'>The <span id='span1'>_</span> number from the sequence is: <span id='span2'></span></p>
    <p id='para2'>Your Fibonacci sequence is:</p>
    <ul id='list'></ul>
</body>
</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.