daenm 2023-01-14 18:48 采纳率: 66.7%
浏览 26
已结题

javascript调用函数没反应

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

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变量还有很多地方需要被调用

  • 写回答

3条回答 默认 最新

  • heart_6662 2023-01-14 19:35
    关注

    望采纳!!!点击回答右侧采纳即可!
    问题可能是因为 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了

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 1月22日
  • 已采纳回答 1月14日
  • 创建了问题 1月14日

悬赏问题

  • ¥15 做个有关计算的小程序
  • ¥15 MPI读取tif文件无法正常给各进程分配路径
  • ¥15 如何用MATLAB实现以下三个公式(有相互嵌套)
  • ¥30 关于#算法#的问题:运用EViews第九版本进行一系列计量经济学的时间数列数据回归分析预测问题 求各位帮我解答一下
  • ¥15 setInterval 页面闪烁,怎么解决
  • ¥15 如何让企业微信机器人实现消息汇总整合
  • ¥50 关于#ui#的问题:做yolov8的ui界面出现的问题
  • ¥15 如何用Python爬取各高校教师公开的教育和工作经历
  • ¥15 TLE9879QXA40 电机驱动
  • ¥20 对于工程问题的非线性数学模型进行线性化