the user need to write the name of the animal, and I need to output the name+animalCode connected.
For some reason I am not getting any output.
Here is the code:
var str = "Cow12,Dog3,Cat721,Lion532";
var getInput = document.getElementById("inp1");
var getSubmit = document.getElementById("subm1");
getSubmit.onclick = function() {
var input = getInput;
var firstPlace = str.indexOf(input);
var numPlace = str.indexOf(",", firstPlace);
var newWord = str.slice(firstPlace, numPlace);
document.getElementById("print").innerHTML = newWord;
};
<form>
<input id="inp1" type="text">
<input id="subm1" type="submit">
</form>
<p id="print"></p>
Thank you very much for the help ! :)
You are just missing the .value part.
var str = "Cow12,Dog3,Cat721,Lion532";
var getInput = document.getElementById("inp1");
var getSubmit = document.getElementById("subm1");
getSubmit.onclick = function(event) {
event.preventDefault();
var input = getInput.value;
var firstPlace = str.indexOf(input);
var numPlace = str.indexOf(",", firstPlace);
var newWord = str.slice(firstPlace, numPlace);
document.getElementById("print").innerHTML = newWord;
};
<form>
<input id="inp1" type="text">
<input id="subm1" type="submit">
</form>
<p id="print"></p>
Make the following change :
Remove form tag as there is no need for that.
var str = "Cow12,Dog3,Cat721,Lion532";
function getSubmit()
{
var input = document.getElementById("inp1").value;
var firstPlace = str.indexOf("",input);
var numPlace = str.indexOf(",", firstPlace);
var newWord = str.slice(firstPlace, numPlace);
document.getElementById("print").innerHTML = newWord;
}
<input id="inp1" type="text">
<button id="subm1" onclick="getSubmit()">Submit</button>
<p id="print"></p>
Related
sorry if it's silly.I want to add the numbers I entered in two separate inputs, but it doesn't work.
<body>
<input type="number" id="number1"/>
<input type="number" id="number2"/>
<button onclick="plus()">Sum</button>
<script>
function plus (){
let numberbox1 = document.getElementById("number1");
let numberbox2 = document.getElementById("number2");
let newnumber = numberbox1 + numberbox2;
let div = document.get.createElement("div");
div.innerText = newnumber ;
document.body.appendChild(div);
}
</script>
let div = document.getElementById("num");
function plus (){
let numberbox1 = +document.getElementById("number1").value;
let numberbox2 = +document.getElementById("number2").value;
let newnumber = numberbox1 + numberbox2;
console.log(newnumber)
div.textContent = newnumber;
}
<input type="number" id="number1"/>
<input type="number" id="number2"/>
<button onclick="plus()">Sum</button>
<div id="num"> </div>
Can someone explain to me or figure it out. I dont know where I made a mistake here. I have javascript and html code where I get input from user for a flight. I want to make a counter to count all flights function counter() but it gives me the value of name. And another problem is I want when I click on the Accept button to make the background of the div element green function changeColor().
function addRow(){
var name = document.getElementById("name");
var plainNum = document.getElementById("plainNum");
var coordinates = document.getElementById("coordinates");
var radius = document.getElementById("radius");
var altitude = document.getElementById("altitude");
var type = document.getElementById("type");
if(!name.value || !plainNum.value || !coordinates.value || !radius.value || !altitude.value || !type.value){
alert("Enter all values");
return;
}
var output = document.getElementById("output");
var divForOutput = document.createElement("DIV");
var btn1 = document.createElement("BUTTON");
var btn2 = document.createElement("BUTTON");
var t1 = document.createTextNode("Accept");
var t2 = document.createTextNode("Reject");
btn1.appendChild(t1);
btn2.appendChild(t2);
divForOutput.innerHTML += name.value +", " + plainNum.value +"<br>" + "Radius: " + radius.value +", "+"Altitude: "+altitude.value+"<br>"+type.value+"<br>";
divForOutput.appendChild(btn1);
divForOutput.appendChild(btn2);
divForOutput.setAttribute('class','printing');
output.appendChild(divForOutput);
btn1.setAttribute('onclick','changeColor(this);');
btn2.setAttribute('onclick','disableButtons()');
// name.value = "";
// plainNum.value = "";
// coordinates.value = "";
// radius.value = "";
// altitude.value = "";
counter();
}
function disableButtons(){}
function changeColor(){
var parentofChild = document.getElementById("output");
output.div.background = green;
}
function counter(){;
var sum = document.getElementsByClassName("printing");
var counter = 0;
for(var i = 0;i <sum.length;i++){
counter+=parseInt(sum[i].innerHTML);
}
document.getElementById("total").innerHTML = counter;
}
<h1>Register flight</h1>
<form>
<div>
<label>Name and surname</label>
<input type="text" id="name">
</div>
<div>
<label>Number plate</label>
<input type="text" id="plainNum">
</div>
<div>
<label>Coordinates</label>
<input type="text" id="coordinates">
</div>
<div>
<label>Radius</label>
<input type="text" id="radius">
</div>
<div>
<label>Altitude</label>
<input type="text" id="altitude">
</div>
<div>
<label>Type</label>
<select id="type">
<option value="Comercial">Comercial</option>
<option value="Buissines">Buissines</option>
</select>
</div>
<div>
<input type="button" value="Submit" onclick="addRow();">
</div>
</form>
<divи>
<h3>Registered flights</h3>
<p>Total:<span id="total">0</span></p>
</div>
<div id="output">
</div>
Below I've fixed some of the code and made things a bit better.
function addRow(){
var name = document.getElementById("name");
var plainNum = document.getElementById("plainNum");
var coordinates = document.getElementById("coordinates");
var radius = document.getElementById("radius");
var altitude = document.getElementById("altitude");
var type = document.getElementById("type");
if(!name.value || !plainNum.value || !coordinates.value || !radius.value || !altitude.value || !type.value){
alert("Enter all values");
return;
}
var output = document.getElementById("output");
var divForOutput = document.createElement("DIV");
//var btn1 = document.createElement("BUTTON");
//var btn2 = document.createElement("BUTTON");
//var t1 = document.createTextNode("Accept");
//var t2 = document.createTextNode("Reject");
//btn1.appendChild(t1);
//btn2.appendChild(t2);
divForOutput.innerHTML = `
${name.value}<br>
Radius: ${radius.value}<br>
Altitude: ${altitude.value}<br>
${type.value}<br>
<button onclick="changeColor();">Accept</button>
<button onclick="disableButtons();">Reject</button>
`;
divForOutput.appendChild(btn1);
divForOutput.appendChild(btn2);
divForOutput.setAttribute('class','printing');
output.appendChild(divForOutput);
//btn1.setAttribute('onclick','changeColor(this);');
//btn2.setAttribute('onclick','disableButtons()');
// name.value = "";
// plainNum.value = "";
// coordinates.value = "";
// radius.value = "";
// altitude.value = "";
counter();
}
function disableButtons(){}
function changeColor(){
const output = document.getElementById("output");
output.style.backgroundColor = "green";
}
function counter(){;
const sum = document.getElementsByClassName("printing");
const counter = sum.getElementsByTagName('div').length;
return document.getElementById("total").innerHTML = counter;
}
There is an explanation for the background color here
As for the counter; what I did was count the div elements inside of the output div. That will give you the amount of flights a user has.
Your color setting had several problems. You don't use output.div.background to set the color, and you were using the undefined variable green instead of the string "green". This works:
function changeColor(){
var output = document.getElementById("output");
output.style.backgroundColor = 'green';
}
I don't know what you are trying to count with your counter function, so I can't fix that.
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 1 year ago.
So no matter what I change if I input anything in the textarea it is not reading anything from the form.
I needed it to be able to have input and not just change the default message of the textarea. If there is any other error in my code please help me by correcting me. And this is only purely html and javascript.
function manage(txt) {
var input = document.getElementById('replace');
if (txt.value != '') {
input.disabled = false;
}
else {
input.disabled = true;
}
}
function findReplace() {
var str = document.getElementById("message").innerHTML;
var find = document.getElementById("find").value;
var replace = document.getElementById("replace").value;
var res = str.replaceAll(find, replace);
document.getElementById("message").innerHTML = res;
}
function Counter(str) {
var str = document.getElementById("message").innerHTML;
var msg = str.split(" ");
var element = document.getElementById("replace").value;
var count = 0;
for ( var i = 0; i < msg.length; i++)
{
if (element == msg[i])
{
count++;
i++;
} else
{
i++;
}
document.getElementById("demo").innerHTML = "Number of replacement: " + count;
}
}
<!-- Message -->
<label for="message">Message: </label><br>
<textarea required type = "text" id="message" name = "message" rows="3" cols="20" method = "post">Hello testing</textarea><br>
<!-- Finding box -->
<label for="find">Find: </label><br>
<input type="text" id="find" name="find" onkeyup = "manage(this)"><br>
<!-- Replace box -->
<label for="replace">Replace with: </label><br>
<input disabled type="text" id="replace" name="replace">
<!--Submit button -->
<input type="button" value="find and replace" onclick ="findReplace(); Counter();">
Try value instead of innerHTML for textarea control.
function findReplace() {
var str = document.getElementById("message").value; //use value here
console.log(str)
var find = document.getElementById("find").value;
var replace = document.getElementById("replace").value;
var res = str.replaceAll(find, replace);
document.getElementById("message").value = res; //use value here
}
Note: There is no element with id demo in the HTML which is used in your JS.
Demo:
function manage(txt) {
var input = document.getElementById('replace');
if (txt.value != '') {
input.disabled = false;
}
else {
input.disabled = true;
}
}
function findReplace() {
var str = document.getElementById("message").value;
console.log(str)
var find = document.getElementById("find").value;
var replace = document.getElementById("replace").value;
var res = str.replaceAll(find, replace);
document.getElementById("message").value = res;
}
function Counter(str) {
var str = document.getElementById("message").innerHTML;
var msg = str.split(" ");
var element = document.getElementById("replace").value;
var count = 0;
for ( var i = 0; i < msg.length; i++)
{
if (element == msg[i])
{
count++;
i++;
} else
{
i++;
}
//document.getElementById("demo").innerHTML = "Number of replacement: " + count;
}
}
<!-- Message -->
<label for="message">Message: </label><br>
<textarea required type = "text" id="message" name = "message" rows="3" cols="20" method = "post">Hello testing</textarea><br>
<!-- Finding box -->
<label for="find">Find: </label><br>
<input type="text" id="find" name="find" onkeyup = "manage(this)"><br>
<!-- Replace box -->
<label for="replace">Replace with: </label><br>
<input disabled type="text" id="replace" name="replace">
<!--Submit button -->
<input type="button" value="find and replace" onclick ="findReplace(); Counter();">
I'm new to javascript and I was making a simple program to reply
but the if statement doesn't work.
Here's my code :
var myInput = document.getElementById('myInput');
var myBtn = document.getElementById('btn');
var value = document.getElementById('myInput').value;
var answer = document.getElementById('answer');
var question = "Hi";
function message() {
if ( value == question) {
answer.innerHTML = "Hi, how can i help you?";
} else {
answer.innerHTML = "Hi ...";
}
}
and here's the html part:
<input id="myInput" type="text">
<button id="myBtn" type="button" onclick="message()">Send!</button>
<p id="answer"></p>
The problem is that you're fetching the value before you have a chance to fill it in.
Instead, fetch it inside the message function.
var myInput = document.getElementById('myInput');
var myBtn = document.getElementById('btn');
var answer = document.getElementById('answer');
var question = "Hi";
function message() {
var value = document.getElementById('myInput').value;
if (value == question) {
answer.innerHTML = "Hi, how can i help you?";
} else {
answer.innerHTML = "Hi ...";
}
}
<input id="myInput" type="text">
<button id="myBtn" type="button" onclick="message()">Send!</button>
<p id="answer"></p>
Place your var value = document.getElementById('myInput').value; inside the button click function
DEMO
var myInput = document.getElementById('myInput');
var myBtn = document.getElementById('btn');
var answer = document.getElementById('answer');
var question = "Hi";
function message() {
var value = document.getElementById('myInput').value;
console.log(value);
console.log(question);
if (value === question) {
answer.innerHTML = "Hi, how can i help you?";
} else {
answer.innerHTML = "Hi ...";
}
}
<input id="myInput" type="text">
<button id="myBtn" type="button" onclick="message()">Send!</button>
<p id="answer"></p>
I am trying to pass a value from javascript to a field on a form. However, it doesn't seem to work. The html code is:
<html>
<head>
<title>Insert title here</title>
</head>
<body onload="splitter()">
<p>Are you sure you want to delete?</p>
<form name="myform" action="http://localhost:8080/EfsiDatabase/timer"
method="post">
<input type="hidden" name="action" value="delete">
<input type="hidden" name="index" id="index">
<input type="submit" name="submit" value="Delete">
</form>
</body>
</html>
On the javascript file, the issue I am having is the last line where I am trying to assign the value to the index input field. No value returns when I do this.
<script type="text/javascript">
function splitter()
{
var str=window.location.search;
var replaced=str.replace("?entry=","");
var n=replaced.split("&entry=");
var i=0;
var form = document.forms['myform'];
while(n)
{
var x=n[i].split("%7C%7C");
var e1 = document.createElement("input");
e1.type = "hidden";
e1.name = "staff"+i;
e1.value = x[0];
var e2 = document.createElement("input");
e2.type = "hidden";
e2.name = "date"+i;
e2.value = x[1];
var e3 = document.createElement("input");
e3.type = "hidden";
e3.name = "project"+i;
e3.value = x[2];
var e4 = document.createElement("input");
e4.type = "hidden";
e4.name = "task"+i;
e4.value = x[3];
var e5 = document.createElement("input");
e5.type = "hidden";
e5.name = "notes"+i;
e5.value = x[4];
var e6 = document.createElement("input");
e6.type = "hidden";
e6.name = "hours"+i;
e6.value = x[5];
form.appendChild(e1);
form.appendChild(e2);
form.appendChild(e3);
form.appendChild(e4);
form.appendChild(e5);
form.appendChild(e6);
i++;
}
document.getElementById("index").value=i+1;
}
</script>
How can I get a value with this method? Thanks for the help.
Instead of
while(n)
{
var x=n[i].split("%7C%7C");
// ...
}
Please use below code:
while(n[i])
{
var x=n[i].split("%7C%7C");
// ...
}