This question already has answers here:
Why is document.write considered a "bad practice"?
(17 answers)
Best way to output Javascript?
(3 answers)
Closed 29 days ago.
note new to JavaScript
when clicking the button to write out the text from my input box it prints out the text but deletes everything else
JavaScript code
let = Text
document.getElementById("Button7").onclick = function () {
Text = document.getElementById("myText").value;
document.write(Text)
}
HTML code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="text" id="myText" placeholder="enter text"> <br>
<button id="Button7">enter</button>
<script type="text/javascript" src="index.js"></script>
<h1>my first website test</h1>
</body>
</html>
You can display the value of the input in a <p> element by setting its textContent. Do not use document.write.
document.getElementById("Button7").addEventListener('click', function() {
document.getElementById("result").textContent = document.getElementById("myText").value;
});
<input type="text" id="myText" placeholder="enter text"> <br>
<button id="Button7">enter</button>
<p id="result"></p>
Related
This question already has answers here:
How to get a number value from an input field?
(4 answers)
Closed 5 months ago.
Here is my code
<html>
<head>
head
<title>title</title>
</head>
<script>
var val1 = parseInt(document.getElementById('input1'));
function bytton()
{
window.alert(val1);
}
</script>
<body>
<br>
<input type="number" id="input1"/>
<br>
<button type="button" onclick="bytton()">value of val1</button>
</body>
</html>
It runs properly without any problem.
At the input field i write a number in it and then click on the button but then it displays that the value is NaN,I think the value is not getting assigned to val1.
<html>
<head>
head
<title>title</title>
</head>
<script>
function bytton() {
window.alert(document.getElementById("input1").value);
}
</script>
<body>
<br>
<input type="number" id="input1"/>
<br>
<button type="button" onclick="bytton()">value of val1</button>
</body>
</html>
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
I have a question when writing js. I define a toys variable in the beginning of the file, it works when I do it in console in chrome, but within the js file, i got an error when trying to use it, it says toys is null.
index.js file:
let addToy = false
let toys = document.getElementById("toy-collection")
document.addEventListener("DOMContentLoaded", ()=>{
const addBtn = document.querySelector('#new-toy-btn')
const toyForm = document.querySelector('.container')
addBtn.addEventListener('click', () => {
// hide & seek with the form
addToy = !addToy
if (addToy) {
toyForm.style.display = 'block'
} else {
toyForm.style.display = 'none'
}
})
fetchToys()
})
function fetchToys(){
fetch("http://localhost:3000/toys")
.then(resp=>resp.json())
.then(json=>addJsonToBlock(json))
}
function addJsonToBlock(json){
for (const toy of json){
toys.innerHTML += `<div class='card'>${toy.name}</div>`
}
}
index.html file:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Toy Tale</title>
<script type="text/javascript" src="src/index.js"></script>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="toy-header">
<img
src="https://fontmeme.com/permalink/180719/67429e6afec53d21d64643101c43f029.png"
alt="toy-header"
/>
</div>
<div class="container">
<form class="add-toy-form">
<h3>Create a toy!</h3>
<input
type="text"
name="name"
value=""
placeholder="Enter a toy's name..."
class="input-text"
/>
<br />
<input
type="text"
name="image"
value=""
placeholder="Enter a toy's image URL..."
class="input-text"
/>
<br />
<input
type="submit"
name="submit"
value="Create New Toy"
class="submit"
/>
</form>
</div>
<p style="text-align:center">
Andy needs your help! <button id="new-toy-btn">Add a new toy!</button>
</p>
<div id="toy-collection"></div>
</body>
</html>
Move your script to the bottom of body before the closing </body> tag.
<script type="text/javascript" src="src/index.js"></script>
It's not working because it's loaded before the DOM has loaded. When you include it at the end, then it loads after the DOM has loaded.
This question already has answers here:
How does NextSibling work?
(2 answers)
Closed 4 years ago.
In this example, I want to get the value of 2 previous sibling
But this is not work btn.previousSibling.previousSibling.value
I need use 4 previousSibling to get the value, why 4?
<!DOCTYPE HTML>
<html>
<head>
<script>
function text(btn){
console.log(btn.previousSibling.previousSibling.previousSibling.previousSibling.value)
}
</script>
</head>
<body>
<textarea></textarea>
<br>
<button onclick="text(this)">text</button>
</body>
</html>
previousSibling points to the previous Node, which is new line (a TextNode) in your example. You might want to use previousElementSibling instead
function text(btn){
console.log(
btn
.previousElementSibling
.previousElementSibling
.value
);
}
<textarea>Hello</textarea>
<br>
<button onclick="text(this)">text</button>
It can be because of empty entries inserted by the browser :
https://developer.mozilla.org/en-US/docs/Web/API/Node/previousSibling
this code works in your case :
<!DOCTYPE HTML>
<html>
<head>
<script>
function text(btn){
alert(btn.previousSibling.previousSibling.value);
}
</script>
</head>
<body>
<textarea>test text</textarea><br><button onclick="text(this)">text</button>
</body>
</html>
You can use JQuery $(btn).prev().prev();
Like :
<!DOCTYPE HTML>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
function text(btn){
alert($(btn).prev().prev().val());
}
</script>
</head>
<body>
<textarea>test text</textarea>
<br>
<button onclick="text(this)">text</button>
</body>
</html>
The reason is because of the br element.
You can get the parent using parentNode and queryselector to get the specific element.
function text(btn) {
var getText = btn.parentNode.querySelector('textarea').value;
console.log(getText.trim())
}
<textarea></textarea>
<br>
<button onclick="text(this)">text</button>
This question already has answers here:
jQuery: get the file name selected from <input type="file" />
(8 answers)
Closed 5 years ago.
Below in the code the vanilla javascript version works fine but the jQuery one I tried to code does not produce the update to the input's text. What error is there in the jQuery one as I cannot seem to spot it.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Total Tutor </title>
<link type="text/css" rel="stylesheet" href="query.css">
<script src="../jquery.js"></script>
</head>
<body>
<div id="main">
<button class="fileUpload">
<input id="uploadBtn" type="file" class="upload">
</button>
<input id="uploadFile" placeholder="0 files selected" disabled="disabled">
</div>
</body>
</html>
<script>
$("#uploadBtn").change(function() {
var value = $(this).val();
$("#uploadFile").val(value);
});
//this works fine
// document.getElementById("uploadBtn").onchange = function () {
// document.getElementById("uploadFile").value = this.value;
// };
</script>
Please try this :
$(function() {
$("input:file").change(function (){
var fileName = $(this).val();
alert(fileName);
// do whatever you want to do with file name
});
});
I have this text field hidden with HTML hidden code, now when the user enter an invalid input I use javascript to unhide the text field and display an error message, this is what is suppose to happen.
I have seen a lot of css style like
`style.visibility = 'visible';` and `style.display='block';`
But none of them are working for me what happens is that the error text shows for less than a second and then disappears, any one would like to share their thoughts.
This is the complete code for better understanding, it's still not working in firefox and Edge while IE and Chrome wont do anything, in Firefox, it just blinks once on each button press and that about it.
Javascript:
</script>
function validate(){
var firstname = document.getElementById("fn").value;
if (firstname == "") {
document.getElementById("fn").style.visibility = "visible";
document.getElementById("fn").text = "ERROR";
}
}
function init()
{
var formData = document.getElementById("enqForm");
formData.onsubmit = validate;
}
window.onload = init;
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<script src="scripts.js"></script>
</head>
<body>
<form id="enqForm">
<input id="fn" type="text" placeholder="First Name *" />
<input id="sendbutton" type="submit" value="Enquire" />
</form>
</body>
</html>
Instead of changing the style, you can change the form's type attribute.
Using JavaScript - assuming you want to change lnspan to text:
document.getElementById('lnspan').type = 'text';
Style is not the same as the type attribute.
Also there's two id attributes in your <input>, you may want to change that.
**THAT IS THE ANSWER TO YOUR QUESTION**
<html>
<head>
<script>
function newDoc() {
document.getElementById("hid").type="text";
document.getElementById("hid").value="ERROR";
}
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
<input type="hidden" id="hid" value="">
</body>
</html>
<!--However this makes your error message as text field which is not good.
What you can do is make the Error into embedded into paragraph <p> so the
users cannot change it and it also looks more professional
<!DOCTYPE html>
<html>
<head>
<script>
function newDoc() {
document.getElementById("te").innerHTML="ERROR";
}
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
<p id="te">
</body>
</html>