我如何用第二个<按钮>叫一个forEach

let words = [];
var longestCt = 0;
var longestWord = "";
var myList = [];
var myList = ['Loops','are','used','while','Learning JavaScript'];
function addWords() {
let template = words.map(word => `<li>${word}</li>`).join('n');
document.querySelector('ul').innerHTML = template;
}
addWords();
let btnAdd = document.querySelector('button');
let input = document.querySelector('input');

btnAdd.addEventListener('click', () => {
words.push(input.value);
input.value = '';
addWords();
});
let findLong = document.querySelector('button');
findLong.addEventListener('click', () => {

let longestCt = 0;
let longestWord = "";
words.forEach(function (value) {
if (value.length > longestCt) {
longestWord = value;
longestCt = value.length;
} else {
longestWord = longestWord;
}
});
//}
});
document.getElementById("demo2").innerHTML = longestWord;

div {
widows: 20%;
margin: auto;
}
input, button {
padding: 5px;
display: inline-block;
}
li {
font-size: 20px;
font-weight: bold;
margin-left: -40px;
list-style: none;
}

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="test_Arr_Input.css">
<title>Test Longest Array.html</title>
</head>
<body>
<!--Thank you to YouTube KodeBase with my modifications adding a second button which isn't working-->
<div>
<input type="text">
<button>Add a Word</button>
<ul></ul>
<br>
<button>Find the Longest</button>
<p id="demo"></p>
</div>
<script type="text/javascript" src="test_Arr_Input.js"></script>
</body>
</html>

充分披露；新手话虽如此；提前谢谢。

我编写了一个简单的JavaScript来返回数组中最长的字符串。这里它只是一个JavaScript函数，我从控制台运行，而不与html:交互

var myList = ['Loops','are','used','while','Learning JavaScript'];
var longestCt = 0;
var longestWord = "";
myList.forEach(function (value) {
if (value.length > longestCt) {
longestWord = value; longestCt = value.length;
} else {
longestWord = longestWord;
}
});
console.log(longestWord);

然后，我努力创建一个HTML页面，将对象输入数组并创建一个列表。(感谢Youtube的KodeBase指导(这方面的JavaScript发布在CSS之后的末尾这是HTML：

<!DOCTYPE html>
<head>
<link rel="stylesheet" href="test_Arr_Input.css">
<title>Test Longest Array.html</title>
</head>
<body>
<!--Thank you to YouTube KodeBase with my modifications adding a second button which isn't working-->
<div>
<input type="text">
<button>Add a Word</button>
<ul></ul>
<br>
<button>Find the Longest</button>
<p id="demo"></p>
</div>

<button onclick="intoMyList()">Submit to the array</button>
<p id="demo"></p>
<button onclick="findTheLongest()">Find the Longest Word</button>
<p id="demo2"></p>
<script type="text/javascript" src="test_Arr_Input.js"></script>
</body>
</html>

这是CSS：

div {
widows: 20%;
margin: auto;
}
input, button {
padding: 5px;
display: inline-block;
}
li {
font-size: 20px;
font-weight: bold;
margin-left: -40px;
list-style: none;
}

这是最后一个JavaScript：

let words = [];
function addWords() {
let template = words.map(word => `<li>${word}</li>`).join('n');
document.querySelector('ul').innerHTML = template;
}
addWords();
let btnAdd = document.querySelector('button');
let input = document.querySelector('input');

btnAdd.addEventListener('click', () => {
words.push(input.value);
input.value = '';
addWords();
});
let findLong = document.querySelector('button');
findLong.addEventListener('click', () => {
//function findTheLongest() {
let longestCt = 0;
let longestWord = "";
myList.forEach(function (value) {
if (value.length > longestCt) {
longestWord = value;
longestCt = value.length;
} else {
longestWord = longestWord;
}
});
//}
});
document.getElementById("demo2").innerHTML = longestWord;

首先，为了更清楚起见，我更改了一些变量名。

但问题是，尽管我可以通过单击第一个按钮来获得进入数组的单词，但第二个按钮似乎无法调用ForEach函数来触发最长单词的返回。我想知道是否需要以某种方式区分HTML中的按钮1和按钮2。或者，如果我只需要回到绘图板上，重新思考我对JS组合方式的理解。

简而言之，您需要为每个按钮提供一个唯一的ID，然后您可以使用该ID来针对代码中的相应按钮。

<button id="add-word">Add a Word</button>

和

let btnAdd = document.querySelector('#add-word');

正如Jamiec所提到的，您应该为每个按钮提供自己的唯一id，并使用getElementById专门针对它，或者您可以使用html中的onclick="function()"直接从该元素调用函数

当前的故障点似乎也是行27读取myList.forEach，而它应该是words.ForEach。我更改了几行，并在这里为您提供了一个工作示例：https://jsfiddle.net/z7dsabLc/6/

相关内容

最新更新

热门标签：