why is this code only giving me the default value
<!DOCTYPE html>
<html>
<body>
<p id= "demo"></p>
<input id="age" />
<button onclick="document.getElementById('demo').innerHTML=text">try it</button>
<script>
var text;
age = document.getElementById('age').value;
switch (age) {
case 10:
text = "diuble";
break;
case 13:
text = "puberty";
break;
case 18:
text = "Beer!";
break;
default:
text = "Looking forward to the Weekend";
}
</script>
</body>
</html>
I have tried changing document.getElementById('age').value to 18, when i do that it gives me the output as beer! but right now its only giving me Looking Forward....
You are not calling a function onclick, and firing the code on document load. The right way to do it would be:
function getText(){
var text;
age = document.getElementById('age').value;
age = parseInt(age)
switch (age) {
case 10:
text = "diuble";
break;
case 13:
text = "puberty";
break;
case 18:
text = "Beer!";
break;
default:
text = "Looking forward to the Weekend";
}
document.getElementById('demo').innerHTML=text
}
<p id= "demo"></p>
<input id="age" />
<button onclick="getText()">try it</button>
Related
I have five input fields, I need to validate all the fields by showing a circle type validation modal. It will be incremented dynamically.
Please find attached sample validation images.
Here is the code:
$("#field1, #field2, #field3").blur(function() {
var getImageName = $('#step-dwld').attr('src').slice(7, 30);
if( !this.value ){
$('#step-dwld').attr('src', 'images/'+getImageName);
} else{
switch (getImageName) {
case "step-bg.png":
$('#step-dwld').attr('src', "images/step-1.png");
break;
case "step-1.png":
$('#step-dwld').attr('src', "images/step-2.png");
break;
case "step-2.png":
$('#step-dwld').attr('src', "images/step-3.png");
break;
}
}
});
Because of your vague question without or with very less code it is hard for us to guess what your code is and your HTML structure, you need to create a Minimal, Complete, and Verifiable example so that others can help you.
However check this it might give you an idea on how to do it, I don't now your code this why and based on guesswork I implemented a similar one to simulate it
JS Fiddle
var validate = $('.validate'), score= 0;
validate.on('change', function(){
score = 0;
validate.each(function(){
if($(this).val() != ''){
score += 100 / validate.length;
}
console.log(score);
setImage(score);
});
});
function setImage(score){
var url;
switch (score){
case 20:
url = '20%';
break;
case 40:
url = '40%';
break;
case 60:
url = '60%';
break;
case 80:
url = '80%';
break;
case 100:
url = '100%';
break;
default:
url = '0%';
}
var img = '<img src="//placehold.it/100x100/?text=' +url+ '">';
$('#img').html(img);
}
#img{width:100px;height:100px;border:1px solid gray;margin:10px 0;}
input[type="text"]{display:block;margin:2px 0;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="img"></div>
<input type="text" class="validate">
<input type="text" class="validate">
<input type="text" class="validate">
<input type="text" class="validate">
<input type="text" class="validate">
<button id="done">I'm Done!</button>
Im trying to make a case statement but my variable for my first switch statement just goes to my default statement when i really have a string in my variable for the type of edge such as: "round", "square", "butt". I tested it with alert(tipoextremo) and it does contain the value "round", "square", or "butt".
For the second switch statement, i am trying to get my button names into the switch statement when i click a button in html and do that function inside the case, but when using alert("hi") it does not even go into the default statement meaning that it is being completely ignored in my javascript.
Botones
Borrar
Varias Lineas
Arco
Cuadratica
Berzier
Zig Zag
Espiral
<section id="parametros">
<form action="" method="post" name="parametro">
Color: <input type="text" name="btncolor" id="color" value="red"><br/>
Ancho: <input type="text" name="btnancho" id="ancho" value="10"><br/>
Tipo Extremo: <br/>
Round <input type="radio" name="btntipoextremo" value="round" id="tipoextremo" checked="checked"><br/>
Square <input type="radio" name="btntipoextremo" value="square" id="tipoextremo"><br/>
Butt <input type="radio" name="btntipoextremo" value="butt" id="tipoextremo"><br/>
<button name="btnOK" type="button" value="OK" onclick="parametros()">OK</button>
</form>
</section>
This is my javascript part.
function parametros() {
//var nombre = document.parametro.btncolor.value;
//alert(nombre);
contexto.beginPath();
color = document.getElementById("color").value;
ancho = document.getElementById("ancho").value;
alert(color);
alert(ancho);
var boton_te = document.forms[0];
var i;
for (i = 0; i < boton_te.length; i++) {
if (boton_te[i].checked) {
tipoextremo = tipoextremo + boton_te[i].value + " ";
}
}
document.getElementById("tipoextremo").value = tipoextremo;
alert(tipoextremo);
$("button[type='button']").click(function()
{
switch(this.name){
case 'btnarco':
fun_arco(color, ancho, tipoextremo);
alert("Hi");
break;
case 'btncuad':
fun_cuad(color, ancho, tipoextremo);
break;
case 'btnbezier':
fun_bezier(color, ancho, tipoextremo);
break;
case 'btnzigzag':
fun_zigzag(color, ancho, tipoextremo);
break;
case 'btnespiral':
fun_espiral(color, ancho, tipoextremo);
break;
default:
alert("hi");
break;
}
});
}
Im trying to make some kind of "blog" buttons. I want to click on a button, and then it will write in my textarea for whatever button I clicked. But for some reason, it wont add if I've been writing or done anything in the textarea before I clicked.
<button onClick="knapp('lank')">Länk</button>
<button onClick="knapp('fet')">Fet</button>
<button onClick="knapp('bild')">Bild</button>
<br><br>
<textarea id='knappar' rows="10" cols="50"></textarea>
And my scriptcode is
function knapp(value)
{
var text;
switch(value){
case "fet":
text = '<b></b>';
break;
case "lank":
text = 'Klicka här';
break;
case "bild":
text = '<img src="https://www.hemsida.com">';
break;
}
var pp = document.createTextNode(text);
document.getElementById('knappar').appendChild(pp);
}
So when I click the button, it writes and append. But if I've been writing, or deleting something, it wont work.
I'm fairly new with Javascript, so sorry for noob question.
Try using
document.getElementById('knappar').value += text;
instead of
var pp = document.createTextNode(text);
document.getElementById('knappar').appendChild(pp);
Full Example
function knapp(value) {
var text;
switch (value) {
case "fet":
text = '<b></b>';
break;
case "lank":
text = 'Klicka här';
break;
case "bild":
text = '<img src="https://www.hemsida.com">';
break;
}
var pp = document.createTextNode(text);
document.getElementById('knappar').value += text;
}
<button onClick="knapp('lank')">Länk</button>
<button onClick="knapp('fet')">Fet</button>
<button onClick="knapp('bild')">Bild</button>
<br><br>
<textarea id='knappar' rows="10" cols="50"></textarea>
I need to - Create a HTML form with a text entry field and a button.. When a number is entered in the text entry field and the button clicked a Javascript function called DayOfTheWeek() is invoked. This function uses a switch statement to determine the day of the week corresponding to the number entered, i.e if the number entered is 1 the message “It’s Monday” is displayed, if the number entered is 2 the message “It’s Tuesday” is displayed and so on. If a number which is not between 1-7 is entered then the message “Not a valid day of the week” is displayed.
my html
<input type="text" name="text1"/>
<input type="button" value="Click me" onclick="days(text1.value);"/>
my java script
function days(dayOfTheWeek)
{
switch (dayOfTheWeek) {
case “1”:
alert(“It\’s Monday”);
break;
case “2”:
alert(“It\’s Tuesday”);
break;
case “3”:
alert(“It\’s Wednesday”);
break;
case “4”:
alert(“It\’s Thursday”);
break;
case “5”:
alert(“It\’s Friday”);
break;
case “6”:
alert(“It\’s Saturday”);
break;
case “7”:
alert(“It\’s Sunday”);
break;
default:
alert(“Not a valid day”);
break;
}
}
PLEASE HELP I keep getting an error with firebug saying days is not defind
function days(dayOfTheWeek) {
var weekday=new Array(7);
weekday[0]="Sunday";
weekday[1]="Monday";
weekday[2]="Tuesday";
weekday[3]="Wednesday";
weekday[4]="Thursday";
weekday[5]="Friday";
weekday[6]="Saturday";
var n = weekday[dayOfTheWeek];
return n;
}
Your updated code
<input type="text" name="text1" id="text1" />
<input type="button" value="Click me" onclick="javascript:days(parseInt(document.getElementById('text1').value));" />
<script language=javascript>
function days(dayOfTheWeek)
{
switch (dayOfTheWeek) {
case 1:
alert("It\’s Monday");
break;
case 2:
alert("It\’s Tuesday");
break;
case 3:
alert("It\’s Wednesday");
break;
case 4:
alert("It\’s Thursday");
break;
case 5:
alert("It\’s Friday");
break;
case 6:
alert("It\’s Saturday");
break;
case 7:
alert("It\’s Sunday");
break;
default:
alert("Not a valid day");
break;
}
}
</script>
Could you please let me know why this code doesn't work? I put the value 1 or the value 2 in the text element but I don't get the result "this is 1" or "this is 2" respectively. It seems that the line "x = document.getElementById("value").value;" doesn't work properly because during debugging I have put n=1; and it works perfect
<html>
<body>
<p>Check the value</p>
<input id="value" type="text"></input>
<button type="button" onclick="myFunction()">Check</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x;
x = document.getElementById("value").value;
switch(x)
{
case 1:
document.getElementById("demo").innerHTML = "this is 1";
break;
case 2:
document.getElementById("demo").innerHTML = "this is 2";
break;
}
}
</script>
</body>
</html>
Values of inputs are strings. You are comparing the string "1" to the number 1 and they are different.
Use parseInt:
<html>
<body>
<p>Check the value</p>
<input id="value" type="text"></input>
<button type="button" onclick="myFunction()">Check</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x;
x = parseInt(document.getElementById("value").value, 10)
switch(x)
{
case 1:
document.getElementById("demo").innerHTML = "this is 1";
break;
case 2:
document.getElementById("demo").innerHTML = "this is 2";
break;
}
}
</script>
</body>
</html>
Convert the variable "x" into integer type by using parseInt(x).ie
var n=parseInt(x);