Что-то знакомое. Как будто из какого-то видео урока по js )
А зачем использовать jQuery и нативный js ?
type="text/javascript" можно не писать
не указывайте oninput="fun1() в html. Обращайтесь к элементами через скрипт и вешайте на них функцию
Вместо async лучше используйте defer
С самим js кодом всё в порядке. Проблема в вызове функции. Если откроете консоль, то увидите "fun1 is not defined" - функция не определена.
Вам достаточно просто вызывать функцию так
$('input').on('change', function() {
fun1();
});
// Или так
$('input').on('change', fun1);
https://jsfiddle.net/ouodkeLn/162/
Здесь я немного подправил ваш код
// Так будет быстрее и проще )
$(function(){
$('input').on('change', fun1);
function fun1() {
var rtl = $('#rtl').val();
var rtr = $('#rtr').val();
var rbr = $('#rbr').val();
var rbl = $('#rbl').val();
var ttl = $('#ttl');
var ttr = $('#ttr');
var tbr = $('#tbr');
var tbl = $('#tbl');
var block = $('#block');
ttl.val(rtl);
ttr.val(rtr);
tbr.val(rbr);
tbl.val(rbl);
block.css({
'border-radius' : rtl + 'px ' + rtr + 'px ' + rbr + 'px ' + rbl + 'px'
});
}
});
https://jsfiddle.net/0ad1ktw3/4/
Я точно смотрел какое-то видео с таким кодом. И тоже, если память не изменяет, что-то не получалось. Там вроде в комментариях был правильный ответ )
Бросайте такого учителя js, который совмещает нативный js и jquery
Найдите канал Дмитрия Лаврика и JavaScript решает. А вских гош дударей, мастер css, веб депелопер блог - забудьте
