Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
Im not sure what to search on google but here is what Im trying to do..
Currently this is my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Product Code weight convertor</title>
<link type="text/css" rel="stylesheet" href="styling.css">
</head>
<body>
<input type="text" placeholder="Product Code" class="pcode">
<button class="btn=find"><i class="x"></i>Find</button>
<div class="res" id="res1">Result1</div>
<script src="app.js"></script>
</body>
</html>
Where it says result1 id like that to change to whatever has been inputted in the text field provided after button been clicked on.
Lets say...
I have enetered 123 into the text field. Click Find, the result1 now changes to 123.
Im not sure where to start with this one, have already looked into google for readings, but couldn't find anything useful.
You need to add a click event listener to button element. When button is clicked, get the value from the input field and display it in the result div element
const btn = document.querySelector('.btn-find');
const inputField = document.querySelector('.pcode');
const result = document.querySelector('.res');
btn.addEventListener('click', () => {
if (inputField.value !== '') {
result.textContent = inputField.value;
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Product Code weight convertor</title>
<link type="text/css" rel="stylesheet" href="styling.css">
</head>
<body>
<input type="text" placeholder="Product Code" class="pcode">
<button class="btn-find"><i class="x"></i>Find</button>
<div class="res" id="res1">Result1</div>
<script src="app.js"></script>
</body>
</html>
You'll need to add a class to your input:
<input id="myText" type="text" placeholder="Product Code" class="pcode">
and some JavaScript:
<script type="text/javascript">
function myFunction() {
document.getElementById("res1").innerHTML = document.getElementById("myText").value;
}
</script>
In-case you use jquery, you can do like this.
<input type="text" class="search__input">
<button>click</button>
$("button").click(event => {
let result = $(".search__input").val();
console.log(result);
});
you can do this, say the find button id is id="find"
$("#find").click(function(){
var inputdata = $(".pcode").val();
document.getElementById("res1").innerHTML = inputdata;
});
you can try this code. It will work.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
it's my first time here, I still have to settle down. the problem with the code is that the result does not come out. Help
<!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>
<form>
<h2>Calacola l'area del quadrto</h2>
valore 1: <input type="text" id="fa">
valore 2: <input type="text" id="ca">
<div id="operatore" value="moltiplicazione"></div>
<br>
<button type="button" onclick="calcola()" value="invio">risultato = </button>
<!-- <input type="button" id="risultato" onclick="calcola()" value="invio"> -->
<div id="risultato"></div>
</form>
</head>
<body>
<script>
function calcola() {
var a = parseInt(document.querySelector('#fa').value);
var b = parseInt(document.querySelector('#ca').value);
var op = document.querySelector('#operatore').value;
var calcolo;
if (op == "moltiplicazione") {
calcolo = a*b;
}
document.querySelector('#risultato').innerHTML=calcolo;
}
</script>
</body>
</html>
I don't understand what it could be, it all seems right, it doesn't give me debugging error I hope you help me🥺
As others have already mentioned, you messed a few things up.
First of all you have to put your form/markup into the body. Secondly a div cannot have a value, so may you use a hidden input or some kind of select.
Here is a working fiddle:
https://jsfiddle.net/j2gesdbm/
<!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>
<h2>Calacola l'area del quadrto</h2>
valore 1: <input type="text" id="fa">
valore 2: <input type="text" id="ca">
<input type="hidden" id="operatore" value="moltiplicazione"/>
<br>
<button type="button" onclick="calcola()" value="invio">risultato = </button>
<!-- <input type="button" id="risultato" onclick="calcola()" value="invio"> -->
<div id="risultato"></div>
</form>
<script>
function calcola() {
var a = parseInt(document.querySelector('#fa').value);
var b = parseInt(document.querySelector('#ca').value);
var op = document.querySelector('#operatore').value;
var calcolo;
if (op == "moltiplicazione") {
calcolo = a*b;
}
document.querySelector('#risultato').innerHTML=calcolo;
}
</script>
</body>
</html>
You are using a "value" attribute for a div
<div id="operatore" value="moltiplicazione"></div>
You can not add the "value" attribute to a div. If you want give a value to this tag, you have to change to an input tag
<input id="operatore" value="moltiplicazione"></input>
If you don't want the input tag to be visible you can set the input type as "hidden"
<input type="hidden" id="operatore" value="moltiplicazione"></input>
I hope I've helped :)
I am working on an assignment in which I need to create javascript code to allow a user to input something and have it be appended to an array. This is the HTML:
<html lang="en">
<head>
<title>Magic 8 Ball!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h1>Magic 8 ball</h1>
<h2>Ask your question, then click on the button!</h2>
<div class="eightBall">
<div id="output">
<p id="result">8</p>
</div>
</div>
<div class="inpBox">
<input type="text" id="inputBox"></input>
</div>
<div class="buttons">
<button id = "addButton" type="button">Add</button>
<button type="button">Custom</button>
<button id = "defaultButton" type="button">Default</button>
<button id = "Ask" type="button">Ask</button>
</div>
</div>
</body>
<script src="js/main.js"></script>
</html>
And the Javascript:
console.log(defaultList)
var customList = [""]
var inputText = document.getElementById("inputBox")
console.log(customList);
document.getElementById("addButton").addEventListener("click", function(){
customList.push(inputText);
console.log(customList);
});
Everything is working properly except when I check the console log to see what value the customList has, it brings the actual input box itself and not the text inside of it.
An image of the console log:
https://imgur.com/a/AiV4hRM
I just need the user to input some text which I will append to an empty array. It isn't taking the text that the user inputted, instead taking the actual input box.
You need to get the value of the input from value attribute.
The below code will just return the reference to the input not the value.
var inputText = document.getElementById("inputBox");
To get the value of the input, you need to get it from the value attribute.
var inputText = document.getElementById("inputBox");
console.log(inputText.value);
Working Example:
let customList = []
let inputText = document.getElementById("inputBox")
console.log(customList);
document.getElementById("addButton").addEventListener("click", function() {
let inputValue = inputText.value;
if (inputValue) {
customList.push(inputValue);
console.log(customList);
}
});
<input type="text" id="inputBox">
<button type="button" id="addButton">Click me</button>
You are pretty close, just missing that you need to get the value attribute of the textbox. See working example below.
var customList = [""]
var inputText = document.getElementById("inputBox")
console.log(customList);
document.getElementById("addButton").addEventListener("click", function(){
customList.push(inputText.value);
console.log(customList);
});
<input id="inputBox" />
<button id="addButton">Add</button>
I'm trying to grab an input value with javascript and render it into a div element. What do I do to make it work?
I'm using querySeclector to grab the input value. When I hardcode it like this:
document.getElementById("result").innerHTML = "Hello World";
It works but doesn't when I replace "Hello World" with the variable that stores the input value and when I do a console.log, I get nothing back even though there are no errors.
HTML
<body>
<div id="container">
<div id="values">
<input id="firstinput" type="text" placeholder="Enter 2 positive figures">
<button id="submit">Submit</button>
</div>
<div id="result"></div>
</div>
<script src="script.js"></script>
</body>
JAVASCRIPT
let submitButton = document.querySelector("#submit"),
showResult = document.getElementById("result").innerHTML,
weightsForLeftAndRightSides = document.querySelector("#firstinput").value;
submitButton.addEventListener("click", weightBalancer);
function weightBalancer() {
showResult = weightsForLeftAndRightSides;
console.log(weightsForLeftAndRightSides);
}
you need get input value inside weightBalancer when sumbit button clicked
function weightBalancer() {
var weightsForLeftAndRightSides = document.querySelector("#firstinput").value;
document.getElementById("result").innerHTML = weightsForLeftAndRightSides;
}
if i understood your question, you can write this code to put the user input in div tag:
<!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> Test</title>
<script >
/*to put the user input in div tag*/
function myFunction(){
const userInput=document.querySelector("#firstinput");
const output=document.querySelector("#result");
output.innerHTML=userInput.value;//this parte overwrite the first input
}
</script>
</head>
<body>
<body>
<div id="container">
<div id="values">
<input id="firstinput" type="text" placeholder="Enter 2 positive figures">
<button id="submit" onclick="myFunction()">Submit</button>
</div>
<div id="result"></div>
</div>
</body>
</html>
Hope this helps
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I have tried Google for an answer to this and others have looked at my work but we can't understand what is wrong here ......? My HTML displays correctly but my Javascript does not run? I am new to Javascript so please explain things simply! My Javascript is in a separate stylesheet from my HTML.
var name;
document.getElementById("changeName").onclick = newName;
function newName() {
name = prompt("What is your name?");
updateName();
}
function updateName() {
document.getElementById("myName").innerHTML = name;
}
var item1;
var item2;
var item3;
document.getElementById("changeList").onclick = newList;
function newList() {
item1 = prompt("Enter a new first thing: ");
item2 = prompt("Enter a new second thing: ");
item3 = prompt("Enter a new third thing: ");
updateList();
}
function updateList() {
document.getElementById("firstThing").innerHTML = item1;
document.getElementById("secondThing").innerHTML = item2;
document.getElementById("thirdThing").innerHTML = item3;
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Things I Like</title>
<style type="text/javascript" src="JS/javascript.js"></style>
</head>
<body>
<h1 id="myName">Elizabeth</h1>
<button id="changeName" type="button">Add Your Name</button>
<hr>
<p id="aboutMe">I'm learning to build dynamic pages with JavaScript and HTML!</p>
<hr>
<h1>Things I Like</h1>
<p>Here are some of the things I like to do:</p>
<ol>
<li id="firstThing">Write JavaScript</li>
<li id="secondThing">Travel the world</li>
<li id="thirdThing">See my friends</li>
</ol>
<button id="changeList" type="button">Change Your List</button>
</body>
</html>
JavaScript doesn't go in "stylesheets". It goes in script files.
This:
<style type="text/javascript" src="JS/javascript.js"></style>
is wrong. Instead you want this:
<script src="JS/javascript.js"></script>
Your code works, but javascript it's not stylesheet, that's CSS.
Change this:
<style type="text/javascript" src="JS/javascript.js"></style>
With this:
<script type="text/javascript" src="JS/javascript.js"></script>
And it works.
Once you fix the <style>/<script> error...
Web pages are loaded top down. So what happens is your JavaScript is loaded and run first. In the second line of your JavaScript you try to get an HTML element.
The problem is the HTML element doesn't exist yet because the web browser hasn't loaded/rendered the HTML yet.
This will not work:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Things I Like</title>
<script>
var dingo = document.getElementById("dingo")
// this will not work because the HTML hasn't finished loading and rendering so the DIV doesn't exist yet
</script>
</head>
<body>
<div id="dingo">ate my baby</div>
</body>
</html>
This will work:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Things I Like</title>
</head>
<body>
<div id="dingo">ate my baby</div>
<script>
var dingo = document.getElementById("dingo")
// this will work
</script>
</body>
</html>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I have a page that has a field and a button.
I need that if the input equals a pre-defined password then it will reveal some text on the screen.
I'm not an html expert that's why ask this here.
In the meanwhile I have only this for now ...
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Welcome</title>
</head>
<body>
<div id="wrapper">
<a rel="tooltip" align = "center" class="btn-success\" href="#"></a>
<form>
<input type="text" />
<input type="submit" />
</form>
</div>
</body>
</html>
Thanks!
EDIT:
I would also like to ask for an PHP more secure solution.
Thanks!
See THIS FIDDLE. I wont cover the same points made elsewhere concerning best practice and server side validation- these should have been made clear by now.
Type myValue in the textbox to see the hidden text.
jQ
$('input[type=text]').keyup(function () {
$(this).val() == 'myValue' ? $('span').show() : $('span').hide();
});
HTML
<input type="text" />
<span>Hidden Text</span>
CSS
span{
display:none;
}
You can use a combination of HTML and Javascript to do what you want. Change your input boxes to
<script type="text/javascript">
function validate(){
if(document.getElementById("my-field").value == "password"){
document.getElementById("my-div").style.display = "block";
</script>
<input type="text" id="my-field" />
<button onclick="validate();">Submit</button>
<div id="my-div">Some hidden text here.</div>
Hope that helps.
Use a server-side language for this. For example PHP. Doing something like this in HTML is completely wrong. Do not use JavaScript for secure operations - it is viewable/editable on the client's side.
However if you insist(you shouldn't!) you can do it with JavaScript:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Welcome</title>
</head>
<body>
<div id="wrapper">
<a rel="tooltip" align = "center" class="btn-success\" href="#"></a>
<form onsubmit="checkPassword()">
<input type="text" name="passwd"/>
<input type="submit" />
</form>
</div>
<script type="text/javascript">
function checkPassword(){
if(document.getElementByName('passwd').value == "topSecretPassword"){
alert("Good!");
}else{
alert("Bad :(");
}
}
</script>
I guess you're a beginner and you're just trying some examples so try the following code, but let me tell you NEVER check passwords with javascript NEVER NEVER!
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Welcome</title>
</head>
<script>
var preDefinedWord = "test123";
function checkMyWord()
{
if(document.getElementById("myword").value == preDefinedWord)
{
alert("its the same");
}
else
{
alert("not the same");
}
}
</Script>
<body>
<div id="wrapper">
<a rel="tooltip" align = "center" class="btn-success\" href="#"></a>
<form>
<input id="myword" type="text" />
<input onclick="checkMyWord()" type="button" />
</form>
</div>
</body>
</html>