I have a html form and would like to use an eventlistener every click on submit button and insert the textarea and textinput to an alert.
the fuction of event.target.value is not working for me and the userinput is not set to a variable.
why eventa.target.value is not working? and how can I use the userinput?
Code:
var myinput = document.getElementById('myinput');
var mytext = document.getElementById('mytext').target.value;
var myform = document.getElementById('myform');
myform.addEventListener("change", function(event) {
alert(mytext);
})
myform.addEventListener("click", function(event) {
alert(mytext);
})
input[type="text"] {
width: 200px;
height: 20px;
}
input[type="submit"] {
width: 100px;
height: 50px;
}
<form action="" id="myform">
<input type="text" id="myinput" />
<br/>
<textarea id="mytext" cols="30" rows="10"></textarea>
<input type="submit" id='submit' />
</form>
You can use the below snippet and keep in mind that target of the event is what you put the click event on. so the target will be the submit button which you don't want. also target.value only works on the target not in any other element in the DOM
const myinput = document.getElementById('myinput');
const mytext = document.getElementById('mytext');
const submitButton = document.getElementById('submit');
submitButton.addEventListener("click", function(event){
const textInput = myinput.value;
const textArea = mytext.value;
alert(`the text Input: '${textInput}' and the text Area: '${textArea}'`);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
input[type="text"] {
width: 200px;
height: 20px;
}
input[type="submit"] {
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<form action="" id="myform">
<input type="text" id="myinput"/>
<br/>
<textarea id="mytext" cols="30" rows="10"></textarea>
<input type="submit" id='submit' />
</form>
</body>
<script src="script.js"></script>
</html>
why eventa.target.value is not working?
Because you are not using Event.target.value. You are trying to use HTMLElement.target.value which of course is undefined because HTMLElement does not have a target property. However, in the case of HTMLInputElement and HTMLTextareaElement they do have a value property which you can read in your event listener:
var myinput = document.getElementById('myinput');
var mytext = document.getElementById('mytext');
var myform = document.getElementById('myform');
myform.addEventListener("change", function(event) {
console.log(mytext.value);
console.log(myinput.value);
})
myform.addEventListener("submit", function(event) {
event.preventDefault();
console.log(mytext.value);
console.log(myinput.value);
})
input[type="text"] {
width: 200px;
height: 20px;
}
input[type="submit"] {
width: 100px;
height: 50px;
}
<form action="" id="myform">
<input type="text" id="myinput" />
<br/>
<textarea id="mytext" cols="30" rows="10"></textarea>
<input type="submit" id='submit' />
</form>
Please note that the change event might only occur as soon as you the input element emits a blur event (depending on the browser you're using).
Related
If you enter 2 numbers in 2 fields, addition and multiplication will be displayed at the same time. After execution, he has to write e.g. Adding: (result of addition) Multiplication (result of multiplication) with one button . How to make from this code:
<!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>
</head>
<body>
<form name="frmadd">
Number 1<input type ="text" name="txt1" ><br>
Number 2<input type ="text" name="txt2" ><br>
addition :<input type ="text" name="txt3" disabled><br>
multiplication :<input type ="text" name="txt4" disabled><br>
<input type="button" value="Add" name="but1" onClick="addNum()">
</form>
<script>
function addNum()
{
num1=parseInt(document.frmadd.txt1.value);
num2=parseInt(document.frmadd.txt2.value);
num3=num1+num2;
num4=num1*num2;
document.frmadd.txt3.value=num3;
document.frmadd.txt4.value=num4;
}
</script>
</body>
</html>
You're really not following any best practices, but either way, your original code is working.
I'm not 100% sure what you mean with "make the result window appear without this window, field," but I assume you want the result to appear outside of the form, in some other element or window. You can use a modal.
The styling isn't good, but this solution gets the point across nicely:
const modal = document.querySelector('#modal');
const firstNum = document.frmadd.txt1;
const secondNum = document.frmadd.txt2;
const additionResult = document.querySelector('#add');
const multResult = document.querySelector('#multiply');
const addNum = () => {
const num1 = +firstNum.value;
const num2 = +secondNum.value;
if (!(num1 + num2)) return alert('Both inputs must be numbers!');
const added = num1 + num2;
const multiplied = num1 * num2;
additionResult.textContent = added;
multResult.textContent = multiplied;
modal.classList.remove('hidden');
setTimeout(hideModal, 3000);
};
const hideModal = () => {
modal.classList.add('hidden');
};
form {
display: flex;
flex-direction: column;
max-width: 300px;
}
#modal {
display: flex;
flex-direction: column;
max-width: 300px;
background: gainsboro;
box-shadow: 0px 0px 15px black;
position: fixed;
left: 10%;
top: 10%;
}
#modal.hidden {
display: none;
}
<form name="frmadd">
<label for="txt1">Num 1</label>
<input type="text" name="txt1" />
<label for="txt2">Num 2</label>
<input type="text" name="txt2" />
<input type="button" value="Add" name="but1" onClick="addNum()" />
</form>
<div id="modal" class="hidden">
<button onClick="hideModal()">X</button>
<h3>Addition Result:</h3>
<p id="add"></p>
<h3>Multiplication Result:</h3>
<p id="multiply"></p>
</div>
When I type in something in the text area element and then click on the read button nothing is being uttered. The console doesn't throw any error and I can't identify where I've gone wrong either. I went on the "SpeechUtterance" MDN documentation and as far as I can tell I've followed all the right steps. Help please!
const read = document.getElementById("read");
const pause = document.getElementById("pause");
const stop = document.getElementById("stop");
const speed = document.getElementById("speed");
const text = document.getElementById("text");
read.addEventListener("click", () => {
readText(text.value)
});
pause.addEventListener("click", () => {
pauseText();
});
function readText(dummy) {
var utterThis = new SpeechSynthesisUtterance(dummy);
if(speechSynthesis.speaking && speechSynthesis.paused) {
return speechSynthesis.resume()
}
if(speechSynthesis.speaking) return;
console.log(utterThis)
console.log(speechSynthesis)
utterThis.text = dummy;
utterThis.rate = speed.value
text.disabled = true;
speechSynthesis.speak(utterThis)
utterThis.addEventListener("end", () => {
text.disabled = false
})
}
function pauseText() {
if(speechSynthesis.speaking) speechSynthesis.pause();
}
body {
background-color: purple;
}
textarea {
margin-top: 50px;
margin: auto;
}
textarea:focus {
background: green;
}
.container {
display: flex;
justify-content: center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">
<title></title>
</head>
<body>
<textarea id="text" name="name" rows="30" cols="100"></textarea>
<div class="container">
<label for="speed">Speed</label>
<input id="speed" type="number" min="0" step="1" max="10">
<button id="read" type="button" name="button">Read</button>
<button id="pause" type="button" name="button">Pause</button>
<button id="stop" type="button" name="button">Stop</button>
</div>
</body>
<script src="index.js" charset="utf-8"></script>
</html>
I'm trying to create an online commenting system where each user can comment on a post and I want a popup text area to be unique to its own button.
Each element is meant to open a text field where a user is to input text to be posted (say in reply to a preceding post or comment).
There are three buttons (representing each user) which when clicked is intended to display a text field specific to the button (or user).
The problem:
After clicking a button, a modal will popup, try typing some text into the field and close the field, without clearing the text in the field, then open another field by clicking on another button. You'll notice that the text typed into one textarea will also be visible in another instance when you click on another button.
What I'm trying to achieve is to make a textarea unique to its direct button instead of a text constantly showing for all buttons clicked.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>multi textarea</title>
</head>
<body>
<button>Open a textarea</button>
<button>Open a textarea</button>
<button>Open a textarea</button>
<div class="textarea_modal_backdrop">
<textarea name="" id="" cols="80" rows="20"></textarea>
</div>
</body>
</html>
<script src="./script.js"></script>
CSS:
.textarea_modal_backdrop{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #444c;
display: grid;
place-items: center;
visibility: hidden;
opacity: 0;
}
.textarea_modal_backdrop.textarea_modal_backdrop_active{
visibility: visible;
opacity: 1;
}
JS:
const allButtonElms = document.getElementsByTagName('button');
const modalBackdrop = document.querySelector('.textarea_modal_backdrop');
for (var i = 0; i < allButtonElms.length; i+=1) {
allButtonElms[i].onclick = () => {
modalBackdrop.classList.add('textarea_modal_backdrop_active')
}
}
document.addEventListener('click', (event) => {
if (event.target.matches('.textarea_modal_backdrop')) {
modalBackdrop.classList.remove('textarea_modal_backdrop_active')
}
})
I'll be grateful if everyone can join in sharing their ideas on how this issue can be solved.
Thank you all!
one way can be to
stored textarea values in an array of value
add a dataset on button to identify value link to textarea
when textarea is closed save data in values array
const values = [];
var currentButton = 0;
const allButtonElms = document.getElementsByTagName('button');
const modalBackdrop = document.querySelector('.textarea_modal_backdrop');
const textarea = document.querySelector('textarea');
for (var i = 0; i < allButtonElms.length; i+=1) {
allButtonElms[i].onclick = (e) => {
var target = e.target || e.srcElement;
currentButton = target.dataset.number;
if (!values[currentButton]) {
values[currentButton] = "";
}
textarea.value = values[currentButton];
modalBackdrop.classList.add('textarea_modal_backdrop_active')
}
}
document.addEventListener('click', (event) => {
if (event.target.matches('.textarea_modal_backdrop')) {
values[currentButton] = textarea.value;
modalBackdrop.classList.remove('textarea_modal_backdrop_active')
}
})
.textarea_modal_backdrop{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #444c;
display: grid;
place-items: center;
visibility: hidden;
opacity: 0;
}
.textarea_modal_backdrop.textarea_modal_backdrop_active{
visibility: visible;
opacity: 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>multi textarea</title>
</head>
<body>
<button data-number="0">Open a textarea</button>
<button data-number="1">Open a textarea</button>
<button data-number="2">Open a textarea</button>
<div class="textarea_modal_backdrop">
<textarea name="" id="" cols="80" rows="20"></textarea>
</div>
</body>
</html>
<script src="./script.js"></script>
I have a <span> element in my HTML, which can change its contents by javascript. However, for styling purposes, I would like the <input type="text"> which I have above it to always remain 2em wider. I don't mind using JQuery.
Thanks in advance!
EDIT: Things I've tried:
$( document ).ready(function() {
var tips = document.getElementById('usageTip');
var name = document.getElementById('name');
name.setAttribute("width", tips.style.width.valueOf + 2);
});
$( document ).ready(function() {
var tips = document.getElementById('usageTip');
var name = document.getElementById('name');
name.setAttribute("width", tips.style.width.value + 2);
});
$( document ).ready(function() {
var tips = document.getElementById('usageTip');
var name = document.getElementById('name');
name.setAttribute("width", tips.style.width);
});
$( document ).ready(function() {
var tips = document.getElementById('usageTip');
var name = document.getElementById('name');
name.setAttribute("width", tips.width + 2);
});
Bear in mind that the CSS specifies the width of the name input box as
width:20em;
and the tips span is not specified (auto).
no Jquery demo, do you mean this ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Demo</title>
</head>
<body>
<style>
.box_wrap {
display: inline-block;
box-sizing: border-box;
padding:2rem;
background: #f0f0f0;
}
.box {
outline: none;
}
</style>
<span class="box_wrap">
<input type="text" id="box" class="box"/>
</span>
<script>
var input = document.querySelector("#box");
var widht = 20;
input.style.width = widht + "em";
</script>
</body>
</html>
Using jquery you can do :
$('#name').css( "width", "calc("+$("#usageTip").width()+"px + 2em)" );
$(document).ready(function() {
$('#resize').click(function() {
$('#inp').css( "width", "calc("+$("#sp").width()+"px + 2em)" );
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span style="background:#faa" id="sp">Content of the span</span>
<br/>
<input type="text" id="inp">
<br/>
<input type="button" id="resize" value="resize" />
I'm trying to set the default focus on an input box when the page loads (example: google).
My page is very simple, yet I can't figure out how to do this.
This is what I've got so far:
<html>
<head>
<title>Password Protected Page</title>
<script type="text/javascript">
function FocusOnInput()
{
document.getElementById("PasswordInput").focus();
}
</script>
<style type="text/css" media="screen">
body, html {height: 100%; padding: 0px; margin: 0px;}
#outer {width: 100%; height: 100%; overflow: visible; padding: 0px; margin: 0px;}
#middle {vertical-align: middle}
#centered {width: 280px; margin-left: auto; margin-right: auto; text-align:center;}
</style>
</head>
<body onload="FocusOnInput()">
<table id="outer" cellpadding="0" cellspacing="0">
<tr><td id="middle">
<div id="centered">
<form action="verify.php" method="post">
<input type="password" name="PasswordInput"/>
</form>
</div>
</td></tr>
</table>
</body>
</html>
How come that doesn't work while this works fine?
<html>
<head>
<script type="text/javascript">
function FocusOnInput()
{
document.getElementById("InputID").focus();
}
</script>
</head>
<body onload="FocusOnInput()">
<form>
<input type="text" id="InputID">
</form>
</body>
</html>
Help is much appreciated :-)
And you can use HTML5's autofocus attribute (works in all current browsers except IE9 and below). Only call your script if it's IE9 or earlier, or an older version of other browsers.
<input type="text" name="fname" autofocus>
This line:
<input type="password" name="PasswordInput"/>
should have an id attribute, like so:
<input type="password" name="PasswordInput" id="PasswordInput"/>
This is one of the common issues with IE and fix for this is simple.
Add .focus() twice to the input.
Fix :-
function FocusOnInput() {
var element = document.getElementById('txtContactMobileNo');
element.focus();
setTimeout(function () { element.focus(); }, 1);
}
And call FocusOnInput() on $(document).ready(function () {.....};
You could also use:
<body onload="focusOnInput()">
<form name="passwordForm" action="verify.php" method="post">
<input name="passwordInput" type="password" />
</form>
</body>
And then in your JavaScript:
function focusOnInput() {
document.forms["passwordForm"]["passwordInput"].focus();
}