如何为输入字段设置默认但可更改的值？

Question

我目前正在为我的 Project Euler 网站处理一些用户输入，并希望每个问题都有一个输入字段，其默认值是网站上问题中的默认值，这样您只需按提交即可获取答案，但我也希望它是可变的，以便您可以使用该函数查找任何限制数字的答案。

var problem1El = document.getElementById("problem1").value;
var problem1buttonEl = document.getElementById("problem1button");
problem1buttonEl.addEventListener("click", findSum);

<p>Problem 1</p><input type="text" id="problem1"><button id="problem1button">Submit</button><a href="https://projecteuler.net/problem=1" target="_blank" class="links">Problem</a><p id="answer1"></p>

函数findSum是我在变量problem1El的帮助下计算答案的地方。我的问题是，如果我将 HTML 或 JS 中的 value 属性设置为 f.ex“1000”，它不会再根据输入而改变。 所以这也不是：

input type="text" value="1000" id="problem1"

也不是这个：

var problem1El = document.getElementById("problem1").value = "1000";

允许我给它一个可更改的默认值。我曾考虑过使用占位符，但对于像 600851475143 这样的数字或问题 8 中可笑的数字来说这是不现实的。

非常感谢任何帮助，祝您有美好的一天！

Answer 1

为了为输入字段设置默认值，您必须为该输入设置“value”属性，如下所示。 获取输入值并将其放入 js 变量中的方式是静态的，因此一旦获取它，它就不会再更新。为了始终拥有新鲜值，您必须将其放入“findSum”函数中。 我不知道您想在 findSum 函数中做什么，所以我只是在结果框中回显提交的值。

var problem1El = document.getElementById("problem1");
document.getElementById("problem1button").addEventListener("click", findSum);

function findSum(){
  var v = problem1El.value;
  document.getElementById("result").innerHTML = v;
}

<input type="number" id="problem1" value="1000"/>
<button id="problem1button">Submit</button>

<p>Result is: <span id="result"></span></p>

Answer 2

此外，我确实需要这样的东西，但默认的固定值应该在选择菜单选项后设置

例如： 选项值=“标记” 选项值=“TOM”

如果我选择标记，它会在输入类型文本字段中放入不可编辑的 MA 前缀。

可能吗？ TY