html 从 id 发送参数到函数

Question

我是一个绝对的初学者，并试图找到类似的问题但找不到。如果之前已经回答过这个问题，我们深表歉意。在我的作业中，我们需要创建一个包含 2 个文本字段和 1 个按钮的表单。这些字段用于高度和宽度，想法是按钮上的 onclick 会将 2 个参数发送到一个函数，该函数将更改照片的高度 + 宽度属性。我知道我做错了什么，因为图片就这样消失了。想法？谢谢！

<html>
    <head>
        <script>

            function borderResize(height1, width1)
            {
                document.getElementById('Amos').height = height1;
                document.getElementById('Amos').width = width1;
            }
        </script>

    </head>

    <body>

        <img src="Amos.jpg" id="Amos" />
        <form>
            <input type="text" id="height" placeholder="Height" />
            <input type="text" id="width" placeholder="Width" />
            <input type="button" value="click!" onclick="borderResize('height.value', 'width.value')"/>
        </form>
    </body>
</html>

Answer 1

当你写

onclick="borderResize('height.value', 'width.value')"

in 表示单击 borderResize 函数时将使用两个字符串参数调用，即字符串 "height.value" 和 "width.value"。在你的情况下你想要这样的东西

onclick="borderResize(document.getElementById('height').value, document.getElementById('width').value)"

在上述情况下，您使用 getElementById 方法从 DOM 中选择元素，然后读取其值属性。

Answer 2

onclick="borderResize('height.value', 'width.value')"

此处传递给 borderResize 字符串：'height.value'、'width.value'。您可以从函数中获取输入值：

function borderResize(height1, width1)
{
    document.getElementById('Amos').height = document.getElementById('height').value;
    document.getElementById('Amos').width = document.getElementById('width').value;
}

Answer 3

你应该学会使用 addEventListener()，我建议你不要使用丑陋的内联点击处理程序。

The EventTarget.addEventListener() method registers the specified listener on the EventTarget it's called on.

这是您的代码示例。

window.onload = function() {
  document.getElementById('button').addEventListener('click', borderResize, true);
}

function borderResize() {
  document.getElementById('Amos').height = document.getElementById('height').value;
  document.getElementById('Amos').width = document.getElementById('width').value;
}

<img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xpf1/v/t1.0-1/s200x200/11034289_10152822971918167_2916173497205137007_n.jpg?oh=71de7a46a75a946cf1d76e5ab10c1cdc&oe=55889977&__gda__=1434173455_6127f174627ed6014c84e562f47bc44c" id="Amos" />

<input type="text" id="height" placeholder="Height" />
<input type="text" id="width" placeholder="Width" />
<input type="button" id="button" value="click!" />

不过，对于您眼前的问题，您可以使用

onclick="borderResize(document.getElementById('height').value, document.getElementById('width').value)"

html 从 id 发送参数到函数

html sending parameters to function from id

html

javascript

function-parameter