javascript调用函数没反应

Question

问题遇到的现象和发生背景

html中不能使用input调用javascript改变canvas的width

遇到的现象和发生背景，请写出第一个错误信息

输入数字没反应

用代码块功能插入代码

HTML
<canvas id="c1"></canvas>
<input type="text" onchange="test(this.value)">

CSS
canvas{
    background-color: black;
    border: violet solid 1px;
}

JS
var dd1 = document.getElementById("c1");

function test(value){
    dd1.width = value;
}

我的解答思路和尝试过的方法

把var dd1放入test method里就正常了，但是dd1变量还有很多地方需要被调用

Answer 1

望采纳！！！点击回答右侧采纳即可！
问题可能是因为 JavaScript 在页面加载完成之后才会运行，而在页面加载完成之前，JavaScript 无法获取到页面中的 DOM 元素。
解决方法有两种：
1.使用 window.onload 或者 $(document).ready() 等方法确保页面加载完成后再进行 DOM 操作，如

window.onload = function(){
var dd1 = document.getElementById("c1");
// ...
}

2.在调用元素之前就获取到该元素，如

var dd1 = document.getElementById("c1");
function test(value){
dd1.width = value;
}

另外，还有一个问题是，在使用 onchange 事件时，需要使用 value 属性来获取输入的值，而不是 this.value。修改为如下代码:
JS

var dd1 = document.getElementById("c1");
function test(value){
dd1.width = value;
}
<input type="text" onchange="test(this.value)">

这样就能正确的改变canvas的width了