jquery - 从输入值更改 css 属性

Question

我现在正在上课，我和我的小组正在尝试创建一个游戏，让 children 使用输入值来操作 CSS。但出于某种原因，每次尝试操作 DOM 时，我都会收到错误消息。

错误:

未捕获的类型错误:无法设置未定义的属性“html” 在 HTMLButtonElement。 (challenges.coffee.self-f525f98….js?body=1:18) 在 HTMLButtonElement.dispatch (jquery.self-bd7ddd3….js?body=1:5227) 在 HTMLButtonElement.elemData.handle (jquery.self-bd7ddd3….js?body=1:4879)

这是 jQuery:

$(".code_generator").click(function() {
    answer = $("#answer").val()
    console.log(answer)
    $(".profile-picture").css("text-align", answer)
  })

HTML:

    <p class="picture_positioning">img { <br> text align:</p>
        <input type="text" name="profile_pic" id="answer" />
        <button class = "code_generator" type="button">Submit code!
        </button>

Answer 1

你可以这样做:

<input type="text" name="profile_pic" id="answer" />
<button type="button" onclick="submit();">Submit code!</button>

js提交函数

function submit(){
  var my_input = document.getElementById("answer").value();

  var obj = document.getElementsByClassName("profile-picture")[0];
  obj.style.setProperty(my_input);
}