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

表示点击borderResize函数将使用两个字符串参数调用，字面意思是字符串＆＃34; height.value＆＃34;和＆＃34; width.value＆＃34;。在你的情况下你想要这样的东西

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

在上面的例子中，您使用getElementById方法从DOM中选择元素，然后读取其value属性。

Answer 2

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

EventTarget.addEventListener（）方法在其调用的EventTarget上注册指定的侦听器。

以下是您的代码示例。

＆＃13;

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;
}

＆＃13;

<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!" />

＆＃13;

然而，对于您的直接问题，您可以使用

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

Answer 3

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;
}

html从id发送参数

3 个答案: