This question already has an answer here:
Why am I getting "ReferenceError: getElementById is not defined"?
(1 answer)
Closed 1 year ago.
For some reasons, I can't display #coupon with javascript, when i try to get elementById it displays the error message elementById undefined,
HTML
<html>
<head>
<title>Exercise</title>
<link rel="stylesheet" href="stylesheet.css">
<script src="javascript.js"></script>
</head>
<body>
<div class="inputi">
<p class="input-text">Une Jam?</p> <input placeholder="Sheno emrin..." type="text" id="inputId">
//checks input value
<button type="button" onclick="getInputValue()">Vazhdo</button>
// shows error message if it doesn't match the array
<p id="message"></p>
</div>
// i want to display this with javascript, after the login
<h1 id="coupon">You won giftcard </strong></h1>
<button id="coupon">abas</button>
</body>
</html>
JS ( the problem )
**
the problem getElementById is undefined, I want to display:block after the successful login attempt.
**
var zzz = getElementById("coupon")
if(zzz === "none") {
display:block; }
// document.writeln("<h1>Keni fituar kupon 50% ne <strong> Green & Protein </strong> </h1>");
// document.writeln('<input class="giftcode" placeholder="' +finalcode+'" type="text" id="inputId">');
display_image(images[z], 400, 400, 'Javascript');
document.write('<br>' + user[i]);
}
}
}
Two things:
getElementById should be document.getElementById
you need to move your script tag to the bottom of the body tag to ensure that the element is in the DOM when you select it
Use:
<html>
<head>
<title>Exercise</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="inputi">
<p class="input-text">Une Jam?</p>
<input placeholder="Sheno emrin..." type="text" id="inputId">
//checks input value
<button type="button" onclick="getInputValue()">Vazhdo</button>
// shows error message if it doesn't match the array
<p id="message"></p>
</div>
// i want to display this with javascript, after the login
<h1 id="coupon">You won giftcard </h1>
<button id="coupon">abas</button>
<script src="javascript.js"></script>
</body>
</html>
From your code above it shows that you're trying to call a method getElementById() which you have not yet defined.
2ndly, you can only assign only 1 id in a document else it will not work.
you can do something like this
// i want to display this with javascript, after the login
<span id="coupon" style="display: none">
<h1>You won giftcard </strong></h1>
<button>abas</button>
</span>
what you meant to call is document.getElementById("coupon"); which is the right function to do.
so try this;
var zzz = document.getElementById("coupon");
i don't really know what your criteria is for a successful login but this show help
let say you set a variable as var success = "yes" on successful login
if(success === "yes"){
zzz.style.display = "block";
}
Call document.getElementById instead. Docs - https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
Try: document.getElementById
Instead of : getElementById
Because getElementById is a document method
Related
we have a chatbot who prints replies using the jQuery
$('<div class="message message-new"><figure class="avatar"><img src="images/icon" /></figure>' + reply + '</div>').appendTo($('.mCSB_container')).addClass('new');
Sometimes the reply variable can contain links, and some of them are very long so we have been trying to hyperlink them, we tried to add an href to the source of the replies
But the jQuery just doesn't print it, not even the hyperlink text, it just completely ignored
if the input from the back-end is
Hi <a href="www.google.com" click here /a>
It just prints "Hi"
Can somebody please guide us on how we can enable hyperlinks by making changes in the source text to the reply variable or any other way
$('<a>', {
href: 'mylink.com',
html: 'mytext'
})
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
reply = 'Hi! What can I help you with?<p>google</p> ';
$('<div class="message message-new"><figure class="avatar"><img src="avatars1.githubusercontent.com/u/6422482?v=3&s=400"; /></figure>' + reply + '</div>').appendTo($('.mCSB_container')).addClass('new');
});
});
</script>
</head>
<body>
<p>Top</p>
<div class="mCSB_container">
test
</div>
<button>Add New </button>
</body>
</html>
Here is my problem. I want to create a questionnaire.
How are you? A)Button "Good" B)Button "Bad"
i.e. user click button B.)
Alert Window is shown and notifying user about his/her last choice.
New Question and Buttons appear on the same page. Essentially, users will go through the set of questions on the same page.
Why are you Bad? A)Button "Some Txt" B.)Button "Some Txt"
How can I show new question and new buttons on the same page. The concept should follow some kind of decision tree logic.
Solutions, advises or "where-to-check hints" appreciated. Please, help me!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello</title>
<script type="text/javascript">
function buttonclickgood() {
alert('you have clicked Good');
}
</script>
<script type="text/javascript">
function buttonclickbad() {
alert('you have clicked Bad');
}
</script>
</head>
<p>How are you?</p>
<input type="button" value="Good!" onclick="buttonclickgood()"/>
<input type="button" value="Bad!" onclick="buttonclickbad()"/>
<body>
</body>
</html>
You might want to explore JQuery a bit.
Particularly something around the .click() API
https://api.jquery.com/click/
Are you intending to do this just on the client side? I would recommend doing this through a client/server model thou e.g. Angular(Client) -> NodeJS(Server)
That is, having the question generation logic in node and let the client consume the questions however it is not impossible to do everything on the client.
So you code will be something like
<script src="../script/jquery-2.1.4.js"></script>
<script>
$(document).ready(function() {
<!-- maybe let say define your data (questions) here -->
var data =
[
{
<!--example ... -->
}
]
$("#btn_1").click(function() {
<!-- do some logic with the data above. Process it then print the new question by update your text -->
$('#TxtArea').val(data);
});
</script>
You will need to use some javascript to hide/show your different steps. With JQuery for example you can do something like that:
<script type="text/javascript">
$(document).ready(function() {
$(".step").hide();
$(".step-1").show();
});
function buttonclick(nextStep)
{
$(".step").hide();
$(".step-"+nextStep).show();
}
</script>
<div class="step step-1">
<p> Question 1 </p>
<input type="button" class="button" value="Good!" onclick="buttonclick(2)"/>
<input type="button" class="button" value="Bad!" onclick="buttonclick(2)"/>
</div>
<div class="step step-2">
<p> Question 2 </p>
<input type="button" class="button" value="Good!" onclick="buttonclick(3)"/>
<input type="button" class="button" value="Bad!" onclick="buttonclick(3)"/>
</div>
<div class="step step-3">
<p> Question 3 </p>
<input type="button" class="button" value="Good!" onclick="buttonclick(1)"/>
<input type="button" class="button" value="Bad!" onclick="buttonclick(1)"/>
</div>
Don't forget to add the JQuery library to make it work. The function can also be replaced by .click from JQuery.
I hope this will help.
WORKING CODE FOR YOU . I have added 2 level question only ... you can add more questions.
Click for working demo
<div id="first">
<p id ="text">How are you?</p>
</div>
<input type="button" id="b1" value="Good!" />
<input type="button" id="b2" value="Bad!"/>
<script>
$("#b1").click(function(){
if($("#b1").val()=="Good!")
{
$("#text").text("Good To hear that ! Do you want to spread a smile ?");
$("#b1").val("Yes");
$("#b2").val("No");
}
});
$("#b2").click(function(){
if($("#b2").val()=="Bad!")
{
$("#text").text("Ohh Sad ! Do you want my help ?");
$("#b1").val("Yes");
$("#b2").val("No");
}
}); </script>
Click for working demo
I have done question changes for both button of question 1 only... rest you can add . Include the jquery file
In my solution buttons' texts are changed. A decision tree of object is followed.
<input type="button" id="left" value="good" onclick="buttonclick(this.value)"/>
<input type="button" id="right" value="bad" onclick="buttonclick(this.value)"/>
<script type="text/javascript">
decision_tree = {
'bad': {
'some A': 'done',
' some B' : 'done'
},
'good': {
'yes': {
'like':'done',
'dont like':'done'
},
'no':'done'
}
};
left = document.getElementById("left");
right = document.getElementById("right");
st = decision_tree;
function buttonclick(v) {
alert('you have clicked ' + v);
if(st[v] == 'done'){
alert('you are done with questionnaire');
left.style.visibility = 'hidden';
right.style.visibility = 'hidden';
} else{
console.log(st[v]);
left.setAttribute("value",Object.keys(st[v])[0]);
right.setAttribute("value",Object.keys(st[v])[1]);
st = st[v];
}
}
</script>
I have a simple application, where I'd like to toggle between showing and hiding elements in a fieldset using jQuery's .toggle effect. The trouble is, occasionally I have to double-click the button that enables the toggle, to get it to work.
Any ideas on what's going on?
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="jquery-2.1.1.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<div class="LeftFrame">
<div id="LeftTable"><strong>Left</div>
</div>
<div id="MainTable"><strong>Main
<div>
<br>
<form><fieldset><legend><button id="buttonShowFields">Add Info</button></legend>
<div id="InfoAddFields">
ID: <input type="text"><br>
Serial Number: <input type="text"><br>
Location: <select id="inputLocation">
<option>Location1</option>
<option>Location2</option></select><br>
Status: <select id="inputStatus">
<option>Complete</option>
<option>In Process</option></select><br>
</div>
</fieldset></form>
</div>
</div>
</body>
</html>
... and javascript (test.js ref in html above):
$(document).ready(function(){
// Show options to add workorder
// $("#WOAddFields").hide();
$("#buttonShowFields").click(function(){
$("#InfoAddFields").toggle();
});
});
Prevent the submit with event.preventDefault() when you click the button
http://jsfiddle.net/3NPPP/
$(document).ready(function(){
$("#buttonShowFields").click(function(e){
e.preventDefault();
$("#InfoAddFields").toggle();
});
});
I was having the same problem when using plain javaScript to toggle an element with the following function:
function toggle(element){
if (element.style.display !== "none")
element.style.display = "none";
else element.style.display = "block";
}
I noticed that when I added display:none to the CSS of the element I wanted to toggle, I needed to double click to first show the element. To fix this, I had to explicitly add style="display:none" to the HTML element tag.
instead of this...
<button id="buttonShowFields">Add Info</button>
use this...
<input type="button" id="buttonShowFields" value="Add Info" />
Please change event method to bind instead click.
$("#buttonShowFields").bind('click',function(){
$("#InfoAddFields").toggle();
});
I need some help here. Whit this page i want to create own link tags with a image. When you click your image, you'll go to that page you have choose. I think i'm almost done but it does not work! What have i done wrong?!
When I click the img element to open the new page, the image pops up..
<head>
<meta charset="utf-8">
<title>Min Startsida</title>
<script type="text/javascript">
function newLink() {
var myNewLink = document.getElementById("link");
localStorage.setItem(link, myNewLink.value)
};
function newIcon() {
var myNewIcon = document.getElementById("icon");
localStorage.setItem(icon, myNewIcon.value)
};
function varIcon() {
document.getElementById("image").src = localStorage.getItem(icon)
};
</script>
</head>
<body>
<form>
<h1>lägg till länk</h1><br />
<input type="text" id="link"><br />
<input type="text" id="icon"><br />
<button onClick="newLink(), newIcon()">lägg till länk</button>
</form>
<section>
<img src="#" id="image" onLoad="varIcon()">
</section>
</body>
This must be a string:
localStorage.setItem("link", myNewLink.value)
^^^^
what happens here is that the element is used as a key as link is used as an id - key has to be a string. This goes for both the setItem methods and the getItem as well that you use later:
<a href="#" onClick="location.href = localStorage.getItem('link')">
Alos, this must be separated with a semi-column:
<button onClick="newLink(); newIcon()">
^
(I didn't look further than these points)
Why won't this code work correctly? If someone selects something with an id of of '1599' then an alert will show "$1,599.00". If the id does not match, then the alert should show "$1,499.00". But it doesn't. Could someone help me figure this out?
thanks
<html>
<script type="text/javascript">
function showPrice(){
var a = document.getElementById();
if (a == "1599"){
alert("$1,599.00");
}
else {
alert("$1,499.00");
}
}
<body>
<div class="hc_right">
<input type="button" class="spc" value="Price" onclick="showPrice()" />
<p class="price" id="1599">$1,599.00</p>
</div>
<div class="hc_right">
<input type="button" class="spc" value="Price" onclick="showPrice()" />
<p class="price" id="1499">$1,499.00</p>
</div>
</div>
</body>
</html>
You need to let showPrice know which element you want to show the alert for. Right now, you're not actually selecting anything with the document.getElementById (a will be either null or undefined at this point).
There are a bunch of different ways to go about doing this, but to keep it close to your current implementation, I might do something like this:
HTML
<div class="hc_right">
<input type="button" class="spc" value="Price" onclick="showPrice(1599)" />
<p class="price" id="1599">$1,599.00</p>
</div>
<div class="hc_right">
<input type="button" class="spc" value="Price" onclick="showPrice(1499)" />
<p class="price" id="1499">$1,499.00</p>
</div>
</div>
Javascript
function showPrice(a){
if (a == "1599"){
alert("$1,599.00");
}
else {
alert("$1,499.00");
}
return false;
}
Fiddle here
I think you will see the issue if you add an
alert(a);
before the if(...) -- My guess is that you aren't getting the value you expect in there.
The document.getElementById() method takes a parameter of the ID to look for. Something like:
document.getElementById("1599")
and will return the document element that has that ID. Not sure what it will return when no parameter is passed.