CODEWITHSUNDEEP
javascripthtmlbutton
Streetrun Uk
Streetrun Uk

Reputation: 1

I want to link this bit of javascript to a button

<script>
var data = prompt("What year would you like the data for?");
if (data == 1901) {
    alert("26 thousand per million for males and 23 for females ");
} else if (data == 1910) {
    alert("23 thousand per million for males and 18 for females");
} else if (data == 1920) {
    alert("19 thousand per million for males and 15 for females");
} else if (data == 1930) {
    alert("17 thousand per million for males and 14.5 for females");
} else if (data == 1940) {
    alert("20 thousand per million for males and 15 for females");
} else if (data == 1950) {
    alert("15 thousand per million for males and 11 for females");
} else if (data == 1960) {
    alert("14.5 thousand per million for males and 9.5 for females");
} else if (data == 1970) {
    alert("14 thousand per million for males and 8 for females");
} else if (data == 1980) {
    alert("13 thousand per million for males and 5 for females");
} else if (data == 1990) {
    alert("10 thousand per million for males and 6 for females");
} else if (data == 2000) {
    alert("7 thousand per million for males and 5.2 for females");
} else if (data == 2010) {
    alert("7 thousand per million for males and 4.9 for females");

}else alert ("please enter a valid year from the chart.");

</script>

This is my javascript which obviously open's a prompt and requests a date but i want this prompt to become active on click of a button for example

To get the date [CLICK HERE] -----> "What year would you like the data for?"

how would i do this. also this button needs to go into html.

Upvotes: 0

Views: 68

Answers (2)

Marcelo Cantos
Marcelo Cantos

Reputation: 185852

May I suggest a bit of a cleanup?

var reportForYear = function(year) {
    var n = {
        1901: [26, 23],
        1910: [23, 18],
        1920: [19, 15],
        ⋮
    }[year];
    return !n ? "please enter a valid year from the chart."
        : n[0] + " thousand per million for males and " + n[1] + " for females";
};

var promptForYearAndReport = function() {
    var year = prompt("What year would you like the data for?");
    alert(reportForYear(year));
};

Then, on the button's onclick, call promptForYearAndReport().

Upvotes: 2

Ryan
Ryan

Reputation: 3926

Try this. Your logic is now inside a function, which is run when the click event is triggered on the button.

<script>
function yearData(){
  var data = prompt("What year would you like the data for?");
  if (data == 1901) {
    alert("26 thousand per million for males and 23 for females ");
  } else if (data == 1910) {
    alert("23 thousand per million for males and 18 for females");
  } else if (data == 1920) {
    alert("19 thousand per million for males and 15 for females");
  } else if (data == 1930) {
    alert("17 thousand per million for males and 14.5 for females");
  } else if (data == 1940) {
    alert("20 thousand per million for males and 15 for females");
  } else if (data == 1950) {
    alert("15 thousand per million for males and 11 for females");
  } else if (data == 1960) {
    alert("14.5 thousand per million for males and 9.5 for females");
  } else if (data == 1970) {
    alert("14 thousand per million for males and 8 for females");
  } else if (data == 1980) {
    alert("13 thousand per million for males and 5 for females");
  } else if (data == 1990) {
    alert("10 thousand per million for males and 6 for females");
  } else if (data == 2000) {
    alert("7 thousand per million for males and 5.2 for females");
  } else if (data == 2010) {
    alert("7 thousand per million for males and 4.9 for females");
  }else{
    alert("please enter a valid year from the chart.");
  }
}
</script>

<button onclick="yearData();">Get Year Data</button>

Upvotes: 1

Related Questions