英文:
Why .value is not getting the value of the input field?
问题
我想要根据输入的值来更改 div 的边框半径。请问这里缺少什么？
HTML：
<div id="container">
<p class="test">Test</p>
<input id="value" type="number" />
<input type="submit" id="submit" />
</div>
JS：
let btn = document.getElementById('submit');
let value = document.getElementById('value');
let border = document.getElementById("container").style.borderRadius;
let pixelVal = value.value + "px";
btn.addEventListener('click', function(){
console.log(pixelVal);
border = pixelVal;
})
英文:
I wanted to change the border radius of the div as the input value. can anybody please acknowledge me what is missing here.
HTML
<div id="container">
<p class="test">
Test
</p>
<input id="value" type="number" />
<input type="submit" id="submit"/>
</div>
JS
let btn=document.getElementById('submit');
let value=document.getElementById('value');
let border=document.getElementById("container").style.borderRadius
let pixelVal=value.value+"px";
btn.addEventListener('click', function(){
console.log(pixelVal);
border=value+"px"
})
答案1
得分: 2
你只需要将像素计算和样式更改的代码行移到点击事件监听器的回调函数内部。
否则，这两行代码将只执行一次，而且是在点击监听器事件运行之前执行。
但是我们希望每次单击提交按钮时都应用该样式。
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let btn = document.getElementById('submit');
let value = document.getElementById('value');
btn.addEventListener('click', function() {
let pixelVal = value.value + "px";
console.log(pixelVal);
document.getElementById("container").style.borderRadius = pixelVal;
})
<!-- language: lang-html -->
<div id="container">
<p class="test">
Test
</p>
<input id="value" type="number" />
<input type="submit" id="submit" />
</div>
<!-- end snippet -->
希望对你有所帮助！
英文:
You just need to move the pixel calculation and style changing lines inside the click event listener's callback function.
Otherwise both of these code of lines will be executed only once, and that too before the click listener event runs.
But we want that style to be applied every-time we click submit button.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let btn = document.getElementById('submit');
let value = document.getElementById('value');
btn.addEventListener('click', function() {
let pixelVal = value.value + "px";
console.log(pixelVal);
document.getElementById("container").style.borderRadius = pixelVal;
})
<!-- language: lang-html -->
<div id="container">
<p class="test">
Test
</p>
<input id="value" type="number" />
<input type="submit" id="submit" />
</div>
<!-- end snippet -->
Hope it helps!
答案2
得分: 1
let btn=document.getElementById('submit');
let value=document.getElementById('value');
let container=document.getElementById("container");
btn.addEventListener('click', function(){
container.style.borderRadius = value.value + 'px';
})
#container {
padding: 10px;
border: 1px solid #000;
}
Test
英文:
Take a look at this code for orientation.
The input value is read in the click event:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let btn=document.getElementById('submit');
let value=document.getElementById('value');
let container=document.getElementById("container");
btn.addEventListener('click', function(){
container.style.borderRadius = value.value + 'px';
})
<!-- language: lang-css -->
#container {
padding: 10px;
border: 1px solid #000;
}
<!-- language: lang-html -->
<div id="container">
<p class="test">
Test
</p>
<input id="value" type="number" />
<input type="submit" id="submit"/>
</div>
<!-- end snippet -->
答案3
得分: 0
-
pixelVal被移至事件监听器内部。这确保了在单击按钮时读取输入的值，而不是在脚本最初加载时。 -
在事件监听器中访问容器元素的样式属性。
英文:
-
pixelValis moved inside the event listener. This ensures that the value of the input is read when the button is clicked and not when the script is initially loaded. -
Access the style property of the container element in the event listener.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let btn = document.getElementById('submit');
let value = document.getElementById('value');
let border = document.getElementById("container");
btn.addEventListener('click', function(){
let pixelVal = value.value+"px";
console.log(pixelVal);
border.style.borderRadius = pixelVal;
})
<!-- language: lang-css -->
#container {
border: 1px solid;
padding: 20px;
}
<!-- language: lang-html -->
<div id="container">
<p class="test"> Test</p>
<input id="value" type="number" />
<input type="submit" id="submit"/>
</div>
<!-- end snippet -->
答案4
得分: 0
Test
英文:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#container{
background-color: yellow;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="container">
<p class="test">Test</p>
<input id="value" type="number" />
<input type="submit" id="submit" />
</div>
</body>
<script>
let btn = document.getElementById("submit");
btn.addEventListener("click", function () {
let value = document.getElementById("value");
let border = document.getElementById("container");
let pixelVal = value.value + "px";
console.log(pixelVal);
border.style.borderRadius = pixelVal
});
</script>
</html>
- Here I have improved your code so now its working. Input value should
be only fetched when button is clicked otherwise It will be null. Thats
why Your code is not working as you want. - Let me know if you don't get...Thank You...!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论