Javascript 箭头函数不使用外部变量

我为我的无知道歉。我刚开始学习Javascript，我正在学习DOM操作和事件。我的问题可能不符合标准

我正在编写一个从输入中接收值并将其转换为大写的代码。这是我的JS代码

这对我不管用

这是我的工作

我不想采用这种方法，因为我希望它是可重用的

HTML

---

我不知道我做错了什么。我周一才开始学习。

我已经能够解决这个问题

const form = document.querySelector('form');

let val = document.querySelector('#amount');
const btnup = document.querySelector('.up-btn')

form.addEventListener('submit', e => {
    e.preventDefault()
    btnup.addEventListener('click', () => {
        newval = val.value
        let newvalue =  newval.toUpperCase();
        newval == newvalue
        console.log(newvalue)
        let result = document.querySelector('.result');
        result.innerHTML = newvalue;
        })
});

HTML

---

如果您希望它是可重用的，那么您可以简单地在具有给定类的元素上注册一个单击事件，并相应地更新它们的内容

常量大写=事件=>{ event.currentTarget.innerHTML=event.currentTarget.innerHTML.toUpperCase； } 常量小写=事件=>{ event.currentTarget.innerHTML=event.currentTarget.innerHTML.toLowerCase； } document.querySelectorAll'.uppercase'.forEachfunctionelement{ 元素。addEventListener'click'，大写； }; document.querySelectorAll'.lowercase'.forEachfunctionelement{ 元素。addEventListener'click'，小写； }; 大写字母 小写

---

PageLoad上的输入是空的，请告诉我怎么做。仅供参考，无需执行[]。forEach.call。nodelist.forEach会很好用的。@Andy它不起作用。在写这段代码之前我试过了啊，也许它只适用于querySelectorAll而不是getElementsByClassName。他们返回不同类型的东西。@Andy yep。。更新了答案，因为它现在更清晰了。

let uppercase = () => {
const form = document.querySelector('form');
let val = document.querySelector('#amount').value;
let newvalue =  val.toUpperCase();
console.log(newvalue)
let result = document.querySelector('.result');
result.innerHTML = newvalue;
}

<form class="form-inline" onsubmit="event.preventDefault();">
    <div class="form-group mb-2">
       <input type="text" class="form-control" id="amount">
    </div>

     <button class="btn calculate-btn btn-primary mb-2" onclick="uppercase()">Upper Case</button>
     <button class="btn calculate-btn btn-primary mb-2" onclick="lowercase()">Lower Case</button>

</form>
   <div class="result">

   </div>

const form = document.querySelector('form');

let val = document.querySelector('#amount');
const btnup = document.querySelector('.up-btn')

form.addEventListener('submit', e => {
    e.preventDefault()
    btnup.addEventListener('click', () => {
        newval = val.value
        let newvalue =  newval.toUpperCase();
        newval == newvalue
        console.log(newvalue)
        let result = document.querySelector('.result');
        result.innerHTML = newvalue;
        })
});

    <form class="form-inline">
        <div class="form-group mb-2">
           <input type="text" class="form-control" id="amount">
        </div>

         <button class="btn up-btn btn-primary mb-2">Upper Case</button>
         <button class="btn calculate-btn btn-primary mb-2" onclick="lowercase()">Lower Case</button>

    </form>
       <div class="result">

       </div>