javascript - 如何使用第二个 <button> 激活函数来调用 forEach？-6ren

javascript - 如何使用第二个

转载作者：行者123 更新时间：2023-12-04 08:57:59

25

4

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');

关于javascript - 如何使用第二个 <button> 激活函数来调用 forEach？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63709407/

25

4

0

文章推荐： python - 修复交互式图表中的轴比例

文章推荐： macos - 请求 EventKit 访问 macOS SwiftUI

文章推荐： amazon-web-services - 在 AWS 路由 53 上配置通配符记录

jquery - Google.code 重力脚本(Mr.Doob)在鼠标移动时触发/激活，而不是在(文档).ready 时触发/激活
我目前正在使用发现的重力脚本 here为了在我的网页上创建重力效果，我正在本地开发 atm。我的问题是，重力效果的激活似乎是在鼠标移动时进行的，而我需要它在文档准备好时才触发。 google.cod
ruby-on-rails - 部署 Rails 应用程序时出错。 'can' t 激活 pg (~>0.18), 已经被 pg 1.0 激活
我正在尝试关注 Railsbridge Intallfest 并尝试将我的第一个 Rails 应用程序部署到 heroku。我不断收到以下错误消息: Gem::LoadError: Specified
php - 如何使该脚本在加载后几秒钟出现/激活？
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
jQuery:激活/悬停第一个选项卡
Home-tab 是默认选中的，但是它的颜色是灰色的:( Home Bla Contact
ios - 激活/停用方向变化的约束
我没有得到它的工作，我不知道为什么......遗憾的是其他问题 + 答案没有帮助。测试设备: iPhone 6 iPad 2 相关代码: override func viewWillTransiti
ios - 激活 UISearchBar
我试图加载一个 View ，就像用户已经按下 UISearchBar 一样。我希望 SearchController 加载顶部的 UISearchBar 以及取消按钮。我已经试过了: func ac
ios - 激活/停用代码
试图在 if whiteDotDist < centerRadius - whiteDotRadius 时获取代码执行它下面的所有代码都是事件的，并且当它下面的代码被执行时它再次变为非事件状态直到if
linux - python 激活
我正在使用 anaconda python。所以每次，在我的 mac 终端中，我输入终端命令: source /Users/mylaptop/anaconda/bin/activate /Users/
Angular SwUpdate 激活 deprication
在我的 Angular 项目中，我有这种代码: this.swUpdate.available.subscribe(() => { ... }); 它工作正常，但给了我关于 activated 被
julia - 激活 Julia 虚拟环境
我想弄清楚 Julia 包是如何工作的，因为我喜欢容器化环境。我真的很挣扎。在 python 中，我会做类似 conda create env --name ds 的事情创建环境然后安装容器化包我会
excel - Windows() 超出范围错误。激活
我的宏中有一些代码如下 ChDir File_pth Workbooks.Open filename:= File_pth & "\" & open_tkt Workbooks.Open filena
excel - 除非手动输入，否则使用串联形成的公式不会计算/激活
长话短说，我有两张纸，一张是“原始数据”，另一张是“结果”。我试图让结果表从“原始数据”表的每第七行中提取文本或数字，因此“结果”中的 A1 将是原始数据中的 A1，“结果”中的 A2 将是“原始数据
jQuery UI Accordion 激活
我不知道如何做到这一点，或者我是否可以做到这一点。我有一个 jQuery UI Accordion，多个部分，每个部分包含多个 anchor 标记，每个 anchor 标记都有一个唯一的字符串 id。
iphone - 激活 iPhone 键盘
我不敢相信我还没有找到任何关于此的文档，但我想知道如何命令键盘激活并接收来自它的输入。我可以找到在编辑文本字段时操作弹出键盘的所有示例。谢谢最佳答案您还可以使用 UIKeyInput 协议(pro
electron - 激活 Electron 生成器NSIS安装程序中的日志记录
我正在尝试为我的 Electron 应用程序生成NSIS安装程序的日志。为此，我创建了一个文件'logging.nsh'来定义LogSet和LogText宏。以下是logging.nsh文件的代码:
javascript - knockoutJS 激活/停用值输入
几周前，我开始使用 typescript 和 knockoutJS，我有一个具体的问题，但我有解决方案，它太丑了，我无法忍受，但无法从中得到任何更好的东西，有太多代码需要粘贴，但我会尽力描述我的问题:
django - 激活 virtualenv 时出错
当我尝试激活我的虚拟环境时收到此错误即源 ~/edu-venv/bin/activate -bash: /home/vagrant/edu-venv/bin/activate: No such fil
git - 激活 ADF 触发器而不发布
要创建触发器，似乎必须发布它才能生效。但是发布需要对“协作”分支进行 PR，这意味着我们甚至在测试触发器是否实际工作之前就必须创建一个 PR，并且还必须创建多个后续 PR，直到我们获得正确的触发器。
IntelliJ 上的 Hibernate 激活
我是最近的 IntelliJ Idea 用户，我不知道如何启用 Hibernate。当我右键单击我的项目时，Hibernate 不会出现在“添加框架支持”菜单中(实际上我唯一可以选择的技术是 Groo
git - 激活 ADF 触发器而不发布
要创建触发器，似乎必须发布它才能生效。但是发布需要对“协作”分支进行 PR，这意味着我们甚至在测试触发器是否实际工作之前就必须创建一个 PR，并且还必须创建多个后续 PR，直到我们获得正确的触发器。

首页

博学

6Ren·AI

商城